From 14e36f845671ace0f82e1b102cc4916e3e81086d Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Tue, 28 May 2024 17:54:50 +0200 Subject: [PATCH] Styling Responsive --- .../two-column/two-column.component.html | 2 +- .../contact-list/contact-list.component.html | 6 +- .../contacts-detail.component.html | 8 +- .../document-list.component.html | 148 ++++++------ .../src/app/_views/home/home.component.html | 28 +-- .../partner-list/partner-list.component.html | 118 +++++----- .../partners-detail.component.html | 8 +- .../posts/post-list/post-list.component.html | 4 +- .../product-list/product-list.component.html | 112 +++++----- .../products-detail.component.html | 4 +- .../sales/sale-list/sale-list.component.html | 154 ++++++------- .../sales-detail/sales-detail.component.html | 4 +- .../tasks/task-list/task-list.component.html | 18 +- .../user-detail/user-detail.component.html | 4 +- .../user/user-list/user-list.component.html | 110 ++++----- matsen-tool/src/assets/scss/_basics.scss | 211 +----------------- matsen-tool/src/assets/scss/_contacts.scss | 25 +++ matsen-tool/src/assets/scss/_sidebar.scss | 87 ++++++++ matsen-tool/src/assets/scss/_table.scss | 6 + matsen-tool/src/assets/scss/_tasks-posts.scss | 98 ++++++++ matsen-tool/src/styles.scss | 3 + 21 files changed, 595 insertions(+), 563 deletions(-) create mode 100644 matsen-tool/src/assets/scss/_contacts.scss create mode 100644 matsen-tool/src/assets/scss/_sidebar.scss create mode 100644 matsen-tool/src/assets/scss/_tasks-posts.scss diff --git a/matsen-tool/src/app/_components/layout/two-column/two-column.component.html b/matsen-tool/src/app/_components/layout/two-column/two-column.component.html index cae6b27..dc4cc62 100644 --- a/matsen-tool/src/app/_components/layout/two-column/two-column.component.html +++ b/matsen-tool/src/app/_components/layout/two-column/two-column.component.html @@ -66,7 +66,7 @@ -
+
{{'basic.back' | translate}}
diff --git a/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html b/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html index 9ca8513..789f39e 100644 --- a/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html +++ b/matsen-tool/src/app/_views/contacts/contact-list/contact-list.component.html @@ -11,7 +11,7 @@ >
-
+
@@ -27,9 +27,9 @@ {{ contact.position }}

+ {{ 'basic.details' | translate }}
- {{ 'basic.details' | translate }}
diff --git a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html index 65c0578..223ace3 100644 --- a/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html +++ b/matsen-tool/src/app/_views/contacts/contacts-detail/contacts-detail.component.html @@ -1,9 +1,9 @@
-
+
-
+

{{ contact.firstName }} {{ contact.lastName }}

{{'form.position' | translate}}:
@@ -16,7 +16,7 @@
{{ contact.birthday | date:'dd.MM.YYYY' }}
-
+
-
+
{{contact.firstName}} {{contact.lastName}}
diff --git a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html index 0f12733..9609998 100644 --- a/matsen-tool/src/app/_views/documents/document-list/document-list.component.html +++ b/matsen-tool/src/app/_views/documents/document-list/document-list.component.html @@ -6,89 +6,91 @@ [getDataFunction]="getData" [dataSource]="dataSource" > - +
+
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.document' | translate }} - {{ element.name }} - + {{ 'overview.document' | translate }} + {{ element.name }} + - {{ 'overview.description' | translate }} - {{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }} - + {{ 'overview.description' | translate }} + {{ element.description?.length > 70 ? element.description?.slice(0, 70) + '...' : element.description }} + - {{ 'overview.partner' | translate }} - {{ element.partnerName }} - + {{ 'overview.partner' | translate }} + {{ element.partnerName }} + - {{ 'overview.product' | translate }} - {{ element.productName }} - + {{ 'overview.product' | translate }} + {{ element.productName }} + - {{ 'overview.uploaded' | translate }} - {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} - + {{ 'overview.uploaded' | translate }} + {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} + - {{ 'overview.createdBy' | translate }} - {{ element.createdByName }} - + {{ 'overview.createdBy' | translate }} + {{ element.createdByName }} + - - + + - - + +
+ + + +
diff --git a/matsen-tool/src/app/_views/home/home.component.html b/matsen-tool/src/app/_views/home/home.component.html index 8b5abaa..6c37ba8 100644 --- a/matsen-tool/src/app/_views/home/home.component.html +++ b/matsen-tool/src/app/_views/home/home.component.html @@ -9,73 +9,63 @@
-
+

{{ 'basic.customer' | translate }}
-
+

{{ 'basic.supplier' | translate }}
-
+

{{ 'basic.service' | translate }}
-
-
- -
-
-
+

{{ 'basic.products' | translate }}
-
+

{{ 'basic.tasks' | translate }}
-
+

{{ 'basic.documents' | translate }}
-
-
- -
-
-
+

{{ 'basic.sales' | translate }}
-
+

{{ 'basic.profile' | translate }}
-
+

{{ 'basic.users' | translate }}

diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html index 741297b..8be383a 100644 --- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html +++ b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html @@ -6,70 +6,72 @@ [getDataFunction]="getData" [dataSource]="dataSource" > - +
+
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.logo' | translate }} - - - + {{ 'overview.logo' | translate }} + + + - {{ partnerColumnHeadline }} - - {{ element.name }} - + {{ partnerColumnHeadline }} + + {{ element.name }} + - {{ 'overview.address' | translate }} - {{ element.street }} {{ element.streetNo }} -
{{ element.zip }} {{ element.city }} -
{{ element.country }} - 		+ {{ 'overview.address' | translate }} + {{ element.street }} {{ element.streetNo }} +
{{ element.zip }} {{ element.city }} +
{{ element.country }} + 		- {{ 'overview.website' | translate }} - - {{ element.website }} - + {{ 'overview.website' | translate }} + + {{ element.website }} + - {{ 'overview.details' | translate }} - - - + {{ 'overview.details' | translate }} + + +
+ + + +
\ No newline at end of file diff --git a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html index 3bb9c7d..9db761f 100644 --- a/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html +++ b/matsen-tool/src/app/_views/partners/partners-detail/partners-detail.component.html @@ -1,16 +1,16 @@
-
+
-
+

{{ partner.name }}

{{ partner.street }} {{ partner.streetNo }}
{{ partner.zip }} {{ partner.city }}
{{ partner.country }}

Sprache: Deutsch

-
+

10002

Telefon:
@@ -34,7 +34,7 @@
-
+
{{partner.name}} diff --git a/matsen-tool/src/app/_views/posts/post-list/post-list.component.html b/matsen-tool/src/app/_views/posts/post-list/post-list.component.html index 52651da..0b649bc 100644 --- a/matsen-tool/src/app/_views/posts/post-list/post-list.component.html +++ b/matsen-tool/src/app/_views/posts/post-list/post-list.component.html @@ -10,7 +10,7 @@
-
+
{{ post.createdAt | date:'dd.MM.YYYY':'GMT+0000' }}

@@ -23,7 +23,7 @@

{{ post.owner?.fullName }}

-
+

{{ post.headline }}

- +
+
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.image' | translate }} - - - + {{ 'overview.image' | translate }} + + + - {{ 'overview.productname' | translate }} - - {{ element.name }} - + {{ 'overview.productname' | translate }} + + {{ element.name }} + - {{ 'overview.storage' | translate }} - {{ element.storage }} - + {{ 'overview.storage' | translate }} + {{ element.storage }} + - {{ 'overview.number-long' | translate }} - {{ element.number }} - + {{ 'overview.number-long' | translate }} + {{ element.number }} + - {{ 'overview.details' | translate }} - - - + {{ 'overview.details' | translate }} + + +
+ + + +
diff --git a/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html b/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html index b0bdfeb..ce6c09c 100644 --- a/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html +++ b/matsen-tool/src/app/_views/products/products-detail/products-detail.component.html @@ -1,7 +1,7 @@
-
+

{{ product.name }}

{{ product.description }}

@@ -17,7 +17,7 @@
234856372
-
+
{{product.name}} diff --git a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html b/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html index 228b0ee..bfe32a2 100644 --- a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html +++ b/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html @@ -6,90 +6,92 @@ [getDataFunction]="getData" [dataSource]="dataSource" > - +
+
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.sale-user' | translate }} - - {{ element.owner.fullName }} - + {{ 'overview.sale-user' | translate }} + + {{ element.owner.fullName }} + - {{ 'overview.sale-partner' | translate }} - - {{ element.partner.name }} - + {{ 'overview.sale-partner' | translate }} + + {{ element.partner.name }} + - {{ 'overview.productname' | translate }} - - {{ element.product.name }} - + {{ 'overview.productname' | translate }} + + {{ element.product.name }} + - {{ 'overview.turnover' | translate }} - - {{ element.turnover | currency: 'EUR' }} - + {{ 'overview.turnover' | translate }} + + {{ element.turnover | currency: 'EUR' }} + - {{ 'overview.profit' | translate }} - - {{ element.profit | currency: 'EUR' }} - + {{ 'overview.profit' | translate }} + + {{ element.profit | currency: 'EUR' }} + - {{ 'overview.createdAt' | translate }} - - {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} - + {{ 'overview.createdAt' | translate }} + + {{ element.createdAt | date:'dd.MM.YYYY HH:mm' }} + - {{ 'overview.details' | translate }} - - - + {{ 'overview.details' | translate }} + + +
+ + + +
diff --git a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html index f3b3c29..488f752 100644 --- a/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html +++ b/matsen-tool/src/app/_views/sales/sales-detail/sales-detail.component.html @@ -1,7 +1,7 @@
-
+

{{'overview.sale-user' | translate }}: {{ sale.owner?.fullName }}

{{'overview.partner' | translate}}:
@@ -16,7 +16,7 @@
-
+
diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html index c3a1791..7be19c2 100644 --- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html +++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html @@ -12,26 +12,26 @@
-
+
- {{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }} -

+ {{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }} +

-

+

-

+

-
+

{{ task.headline }}

-
+

@@ -51,7 +51,7 @@
-
+
{{ task.dueAt | date:'dd.MM.YYYY':'GMT+0000' }}

@@ -63,7 +63,7 @@

-
+

{{ task.headline }}

diff --git a/matsen-tool/src/app/_views/user/user-detail/user-detail.component.html b/matsen-tool/src/app/_views/user/user-detail/user-detail.component.html index 33c6327..02df228 100644 --- a/matsen-tool/src/app/_views/user/user-detail/user-detail.component.html +++ b/matsen-tool/src/app/_views/user/user-detail/user-detail.component.html @@ -1,14 +1,14 @@
-
+

{{ user.firstName }} {{ user.lastName }}

E-Mail Adresse:
{{ user.email }}
-
+
{{user.firstName}} {{user.lastName}} diff --git a/matsen-tool/src/app/_views/user/user-list/user-list.component.html b/matsen-tool/src/app/_views/user/user-list/user-list.component.html index 05bf283..3a0cb3a 100644 --- a/matsen-tool/src/app/_views/user/user-list/user-list.component.html +++ b/matsen-tool/src/app/_views/user/user-list/user-list.component.html @@ -3,66 +3,68 @@ [getDataFunction]="getData" [dataSource]="dataSource" > - +
+
- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - -
- {{ 'overview.number' | translate }} - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - + {{ 'overview.number' | translate }} + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + - {{ 'overview.image' | translate }} - - - + {{ 'overview.image' | translate }} + + + - {{ 'overview.firstName' | translate }} - - {{ element.firstName }} - + {{ 'overview.firstName' | translate }} + + {{ element.firstName }} + - {{ 'overview.lastName' | translate }} - - {{ element.lastName }} - + {{ 'overview.lastName' | translate }} + + {{ element.lastName }} + - {{ 'overview.email' | translate }} - - {{ element.email }} - + {{ 'overview.email' | translate }} + + {{ element.email }} + - {{ 'overview.details' | translate }} - - - + {{ 'overview.details' | translate }} + + +
+ + + +
\ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss index a911117..8111432 100644 --- a/matsen-tool/src/assets/scss/_basics.scss +++ b/matsen-tool/src/assets/scss/_basics.scss @@ -97,90 +97,6 @@ img { } } -.spt-sidebar { - //background: #2b3a44; - padding: 0; - .card { - background: transparent; - color: #fff; - border-bottom: 1px solid #fff; - width: 100%; - text-decoration: none; - .card-body { - min-height: 50px; - text-transform: uppercase; - text-align: right; - - h3 { - right: 10px; - bottom: 10px; - } - } - &.active { - .card-body { - min-height: 100px; - position: relative; - &:before { - content: ""; - position: absolute; - left: 20px; - top: 50%; - transform: translate(0,-50%); - width: 65px; - height: 100%; - filter: brightness(600%); - border-right: 1px solid #fff; - } - &[data-cat="customer"]:before { - background: transparent url("/assets/images/icons/customer.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="supplier"]:before { - background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="service"]:before { - background: transparent url("/assets/images/icons/service.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="product"]:before { - background: transparent url("/assets/images/icons/product.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="task"]:before { - background: transparent url("/assets/images/icons/task.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="document"]:before { - background: transparent url("/assets/images/icons/document.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="sale"]:before { - background: transparent url("/assets/images/icons/sale.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="profile"]:before { - background: transparent url("/assets/images/icons/profile.svg") no-repeat left center; - background-size: 45px auto; - } - &[data-cat="user"]:before { - background: transparent url("/assets/images/icons/user.svg") no-repeat left center; - background-size: 45px auto; - } - h3 { - bottom: 50%; - transform: translate(0,50%); - } - } - } - } - .nav { - li { - margin: 0 !important; - } - } -} - .icon-mini { height: 15px; display: inline; @@ -191,6 +107,9 @@ img { .spt-main { background: #fff; color: rgba(33,37,41); + @media only screen and (max-width: 1199px) { + //width: calc(100% - calc(var(--bs-gutter-x) * 0.5) - calc(var(--bs-gutter-x) * 0.5)); + } } .spt-container { @@ -238,82 +157,6 @@ img { } } -.posts .post, -.tasks-box { - border-top: 1px solid #525f66; - padding-top: 3px; - background: #fff; -} -.posts .post, -.tasks { - .card { - background: #fafafa; - .spt-border { - border-left: 1px solid #c1c1c1; - } - } - [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) { - right: 0; - top: 5px; - bottom: auto; - } -} - -.spt-comments-box { - right: 0; - bottom: 0; -} -.spt-comments { - margin: 5px 0 0 200px; -} - -.contacts { - .row:not(.card .row) { - border-top: 1px solid #2B3A44; - padding-bottom: 20px; - } - .card { - background: #f2f2f2; - border-top: 2px solid #c1c1c1; - margin-top: 20px; - } - .spt-contact-box { - position: relative; - .badge { - position: absolute; - right: 12px; - bottom: 0; - } - } - img { - object-fit: cover; - height: 120px; - width: 100%; - } -} - -.importance { - display: block; - width: 50%; - max-width: 800px; - height: 5px; - position: absolute; - right: 0; - top: 0px; - - &[data-importance="low"] { - background: #77bb33; - } - - &[data-importance="medium"] { - background: #ffee55; - } - - &[data-importance="high"] { - background: #bb1414; - } -} - .toggle-component { .spt-container { background: #fafafa; @@ -387,45 +230,15 @@ img { } } -.taskCompactModeBox { - position: relative; - padding-left: 20px; - cursor: pointer; - &:before { - content: ""; - position: absolute; - left: 0; - top: 3px; - width: 14px; - height: 14px; - border: 1px solid rgb(33, 37, 41); - } - &.taskCompactMode { - &:after { - content: ""; - position: absolute; - left: 3px; - top: 6px; - width: 8px; - height: 8px; - background: rgb(33, 37, 41); - } - } -} -.spt-compact { - position: relative; - padding-top: 4px; - &:before { - content: ""; - position: absolute; - left: 12px; - top: 0; - height: 1px; - width: calc(100% - 12px); - background: #c1c1c1; - } -} - .dropdown-menu { border-radius: 0; } + +.info-box { + display: flex; + justify-content: flex-start; + align-items: center; + @media only screen and (max-width: 767px) { + display: block; + } +} \ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_contacts.scss b/matsen-tool/src/assets/scss/_contacts.scss new file mode 100644 index 0000000..a564776 --- /dev/null +++ b/matsen-tool/src/assets/scss/_contacts.scss @@ -0,0 +1,25 @@ +.contacts { + .row:not(.card .row) { + border-top: 1px solid #2B3A44; + padding-bottom: 20px; + } + .card { + background: #f2f2f2; + border-top: 2px solid #c1c1c1; + margin-top: 20px; + height: calc(100% - 20px); + } + .spt-contact-box { + position: relative; + .badge { + position: absolute; + right: 0; + bottom: 0; + } + } + img { + object-fit: cover; + height: 120px; + width: 100%; + } +} \ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_sidebar.scss b/matsen-tool/src/assets/scss/_sidebar.scss new file mode 100644 index 0000000..3cde169 --- /dev/null +++ b/matsen-tool/src/assets/scss/_sidebar.scss @@ -0,0 +1,87 @@ +.spt-sidebar { + position: relative; + padding: 0; + @media only screen and (max-width: 1199px) { + //margin-left: calc(-100vw / 12 * 2); + display: none; + } + .card { + background: transparent; + color: #fff; + border-bottom: 1px solid #fff; + width: 100%; + text-decoration: none; + .card-body { + min-height: 50px; + text-transform: uppercase; + text-align: right; + + h3 { + right: 10px; + bottom: 10px; + } + } + &.active { + .card-body { + min-height: 100px; + position: relative; + &:before { + content: ""; + position: absolute; + left: 20px; + top: 50%; + transform: translate(0,-50%); + width: 65px; + height: 100%; + filter: brightness(600%); + border-right: 1px solid #fff; + } + &[data-cat="customer"]:before { + background: transparent url("/assets/images/icons/customer.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="supplier"]:before { + background: transparent url("/assets/images/icons/supplier.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="service"]:before { + background: transparent url("/assets/images/icons/service.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="product"]:before { + background: transparent url("/assets/images/icons/product.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="task"]:before { + background: transparent url("/assets/images/icons/task.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="document"]:before { + background: transparent url("/assets/images/icons/document.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="sale"]:before { + background: transparent url("/assets/images/icons/sale.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="profile"]:before { + background: transparent url("/assets/images/icons/profile.svg") no-repeat left center; + background-size: 45px auto; + } + &[data-cat="user"]:before { + background: transparent url("/assets/images/icons/user.svg") no-repeat left center; + background-size: 45px auto; + } + h3 { + bottom: 50%; + transform: translate(0,50%); + } + } + } + } + .nav { + li { + margin: 0 !important; + } + } +} \ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_table.scss b/matsen-tool/src/assets/scss/_table.scss index e973590..72c85c4 100644 --- a/matsen-tool/src/assets/scss/_table.scss +++ b/matsen-tool/src/assets/scss/_table.scss @@ -1,3 +1,9 @@ +.table-responsive { + display: block; + width: 100%; + overflow-x: auto; +} + table { width: 100%; img { diff --git a/matsen-tool/src/assets/scss/_tasks-posts.scss b/matsen-tool/src/assets/scss/_tasks-posts.scss new file mode 100644 index 0000000..69f0ce5 --- /dev/null +++ b/matsen-tool/src/assets/scss/_tasks-posts.scss @@ -0,0 +1,98 @@ +.posts .post, +.tasks-box { + border-top: 1px solid #525f66; + padding-top: 3px; + background: #fff; +} +.posts .post, +.tasks { + .card { + background: #fafafa; + .spt-border { + border-left: 1px solid #c1c1c1; + } + } + [data-type="user-tool"]:not(.spt-comments [data-type="user-tool"]) { + right: 0; + top: 5px; + bottom: auto; + } +} + +.spt-comments-box { + right: 0; + bottom: 0; +} +.spt-comments { + margin: 5px 0 0 200px; +} + +.importance { + display: block; + width: 50%; + max-width: 800px; + height: 5px; + position: absolute; + right: 0; + top: 0px; + + &[data-importance="low"] { + background: #77bb33; + } + + &[data-importance="medium"] { + background: #ffee55; + } + + &[data-importance="high"] { + background: #bb1414; + } +} + +.taskCompactModeBox { + position: relative; + padding-left: 20px; + cursor: pointer; + &:before { + content: ""; + position: absolute; + left: 0; + top: 3px; + width: 14px; + height: 14px; + border: 1px solid rgb(33, 37, 41); + } + &.taskCompactMode { + &:after { + content: ""; + position: absolute; + left: 3px; + top: 6px; + width: 8px; + height: 8px; + background: rgb(33, 37, 41); + } + } +} +.spt-compact { + position: relative; + padding-top: 4px; + &:before { + content: ""; + position: absolute; + left: 12px; + top: 0; + height: 1px; + width: calc(100% - 12px); + background: #c1c1c1; + } + //&:after { + // content: ""; + // position: absolute; + // left: 0; + // top: 11px; + // bottom: 19px; + // width: 1px; + // background: #c1c1c1; + //} +} \ No newline at end of file diff --git a/matsen-tool/src/styles.scss b/matsen-tool/src/styles.scss index 39a5ea4..a866fa8 100644 --- a/matsen-tool/src/styles.scss +++ b/matsen-tool/src/styles.scss @@ -4,9 +4,12 @@ @import "assets/scss/mixins"; @import "assets/scss/basics"; @import "assets/scss/modal"; +@import "assets/scss/sidebar"; @import "assets/scss/form"; @import "assets/scss/table"; @import "assets/scss/text"; +@import "assets/scss/contacts"; +@import "assets/scss/tasks-posts"; @import "assets/scss/sales"; @import "assets/scss/button"; @import "assets/scss/accordion";