ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Implement new sidebar styling

This commit is contained in:
Ramon Wenger 2020-06-02 16:44:47 +02:00
parent 6e77cfe433
commit 2ebceec717
10 changed files with 166 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/components/HeaderBar.vue
View File

@ -59,20 +59,19 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@supports (display: grid) { @supports (display: grid) {
display: none; display: grid;
@include desktop {
display: grid;
}
} }
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: $color-white; background-color: $color-white;
grid-auto-rows: 50px; grid-auto-rows: 50px;
width: 100%; width: 100%;
max-width: 100vw;
grid-template-columns: 1fr 1fr 1fr;
@include desktop { @include desktop {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 50px 1fr 200px;
grid-template-rows: 50px; grid-template-rows: 50px;
grid-auto-rows: auto; grid-auto-rows: auto;
} }
@ -91,6 +90,21 @@
-ms-grid-row-align: center; -ms-grid-row-align: center;
} }
&__content-navigation {
grid-column: 2;
justify-content: space-between;
}
&__sidebar-link {
padding: $small-spacing;
cursor: pointer;
}
&__sidebar-icon {
width: 30px;
height: 30px;
}
/* /*
* For IE10+ * For IE10+
*/ */
@ -107,29 +121,6 @@
-ms-grid-column: 1; -ms-grid-column: 1;
-ms-grid-column-span: 3; -ms-grid-column-span: 3;
} }
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
&__logo-icon {
width: 212px;
height: 31px;
}
} }
.user-header { .user-header {
@ -141,6 +132,11 @@
&__sidebar-link { &__sidebar-link {
cursor: pointer; cursor: pointer;
display: none;
@include desktop {
display: flex;
}
} }
} }
</style> </style>

5
client/src/components/LogoutWidget.vue
View File

@ -3,7 +3,7 @@
<a <a
class="logout-widget__logout" class="logout-widget__logout"
data-cy="logout" data-cy="logout"
@click="logout()">Logout</a> @click="logout()">Abmelden</a>
</div> </div>
</template> </template>
@ -28,12 +28,11 @@
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.logout-widget { .logout-widget {
color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;
&__logout { &__logout {
@include regular-text; @include default-link;;
cursor: pointer; cursor: pointer;
} }
} }

73
client/src/components/book-navigation/ContentNavigation.vue
View File

@ -65,21 +65,63 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.top-navigation { .content-navigation {
display: flex; display: flex;
align-items: center;
&__link { &__link {
padding: 0 24px; padding: 0 24px;
@include default-link; @include navigation-link;
}
&__primary, &__secondary {
display: none;
flex-direction: row;
@include desktop {
display: flex;
}
}
&__logo {
color: #17A887;
font-size: 36px;
font-weight: 800;
font-family: $sans-serif-font-family;
display: flex;
justify-self: center;
/*
* For IE10+
*/
-ms-grid-column: 2;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
&__logo-icon {
width: 212px;
height: 31px;
}
&__link {
&--secondary {
@include regular-text;
}
} }
$parent: &; $parent: &;
&--mobile { &--sidebar {
flex-direction: column; flex-direction: column;
#{$parent}__primary, #{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
}
#{$parent}__link { #{$parent}__link {
color: $color-white;
@include heading-4; @include heading-4;
line-height: 2.5em; line-height: 2.5em;
padding: 0; padding: 0;
@ -93,20 +135,21 @@
} }
#{$parent}__item { #{$parent}__item {
border-bottom: 1px solid $color-white; width: 100%;
//border-bottom: 1px solid $color-white;
&:nth-child(1) { /*&:nth-child(1) {*/
order: 3; /* order: 3;*/
border-bottom: 0; /* border-bottom: 0;*/
} /*}*/
&:nth-child(2) { /*&:nth-child(2) {*/
order: 1; /* order: 1;*/
} /*}*/
&:nth-child(3) { /*&:nth-child(3) {*/
order: 2; /* order: 2;*/
} /*}*/
} }
} }
} }

8
client/src/components/book-navigation/NavigationSidebar.vue
View File

@ -60,6 +60,10 @@
background-color: white; background-color: white;
z-index: 20; z-index: 20;
@include desktop {
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
}
display: grid; display: grid;
grid-template-columns: 1fr 50px; grid-template-columns: 1fr 50px;
@ -75,12 +79,10 @@
overflow-y: auto; overflow-y: auto;
@include desktop { @include desktop {
//display: none;
width: 285px; width: 285px;
} }
&__main { &__main {
background-color: $color-brand;
padding: $medium-spacing; padding: $medium-spacing;
grid-area: m; grid-area: m;
} }
@ -93,13 +95,13 @@
grid-column: 2; grid-column: 2;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
cursor: pointer;
} }
&__close-icon { &__close-icon {
width: 30px; width: 30px;
height: 30px; height: 30px;
opacity: 0.5; opacity: 0.5;
fill: $color-white;
} }
} }
</style> </style>

1
client/src/components/modules/Module.vue
View File

@ -216,6 +216,7 @@
.module { .module {
display: flex; display: flex;
justify-self: center; justify-self: center;
max-width: 100vw;
@include desktop { @include desktop {
width: 800px; width: 800px;

4
client/src/components/profile/Avatar.vue
View File

@ -124,8 +124,8 @@
height: 34px; height: 34px;
display: block; display: block;
left: 50%; left: 50%;
bottom: -7px; bottom: -3px;
transform: translateX(50%); transform: translateX(80%);
background-color: $color-white; background-color: $color-white;
border-radius: 50%; border-radius: 50%;
padding: 6px; padding: 6px;

119
client/src/components/profile/ProfileSidebar.vue
View File

@ -76,62 +76,71 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.profile-sidebar { .profile-sidebar {
padding: $large-spacing 0; padding: $large-spacing 0;
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
height: 100vh; height: 100vh;
background-color: $color-white; background-color: $color-white;
z-index: 15; z-index: 15;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
@include desktop { @include desktop {
width: 333px; width: 333px;
}
display: flex;
flex-direction: column;
justify-content: flex-start;
&__section {
margin-bottom: $large-spacing;
&:last-of-type {
margin-top: auto;
}
}
&__item {
padding: $small-spacing $medium-spacing;
}
&__subtitle {
@include small-text;
margin: 0;
margin-bottom: $small-spacing;
}
&__link {
@include default-link;
display: block;
}
&__close-link {
position: absolute;
right: $small-spacing;
top: $small-spacing;
cursor: pointer;
}
&__close-icon {
width: 30px;
height: 30px;
opacity: 0.5;
}
&__support {
padding: $medium-spacing;
@include regular-text;
color: $color-silver-dark;
}
} }
display: flex;
flex-direction: column;
&__item {
border-bottom: 1px solid $color-silver-light;
padding: $large-spacing $medium-spacing;
}
&__subtitle {
@include small-text;
margin: 0;
margin-bottom: $small-spacing;
}
&__link {
@include default-link;
display: block;
}
&__close-link {
position: absolute;
right: $small-spacing;
top: $small-spacing;
cursor: pointer;
}
&__close-icon {
width: 40px;
height: 40px;
}
&__support {
padding: $small-spacing;
@include regular-text;
color: $color-silver-dark;
}
}
</style> </style>

8
client/src/components/profile/ProfileWidget.vue
View File

@ -35,10 +35,10 @@
.profile-widget { .profile-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: start;
&__name { &__name {
@include heading-3; @include heading-4;
text-align: center; text-align: center;
margin-bottom: $small-spacing; margin-bottom: $small-spacing;
} }
@ -47,8 +47,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
width: 80px; width: 120px;
height: 80px; height: 120px;
position: relative; position: relative;
} }

11
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -105,7 +105,6 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
border: 1px solid $color-silver;
border-radius: 4px; border-radius: 4px;
&__popover { &__popover {
@ -120,22 +119,22 @@
.selected-class { .selected-class {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $small-spacing $medium-spacing; padding: $small-spacing 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: start;
&__text { &__text {
line-height: $large-spacing; line-height: $large-spacing;
@include regular-text; @include heading-4;
color: $color-silver-dark; margin-right: $small-spacing;
} }
&__dropdown-icon { &__dropdown-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: $color-brand; fill: $color-charcoal-dark;
} }
} }
</style> </style>

1
client/src/components/school-class/CurrentClass.vue
View File

@ -28,6 +28,5 @@
.current-class { .current-class {
line-height: $large-spacing; line-height: $large-spacing;
@include regular-text; @include regular-text;
color: $color-silver-dark;
} }
</style> </style>