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;
flex-direction: row;
@supports (display: grid) {
display: none;
@include desktop {
display: grid;
}
display: grid;
}
align-items: center;
justify-content: space-between;
background-color: $color-white;
grid-auto-rows: 50px;
width: 100%;
max-width: 100vw;
grid-template-columns: 1fr 1fr 1fr;
@include desktop {
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 50px 1fr 200px;
grid-template-rows: 50px;
grid-auto-rows: auto;
}
@ -91,6 +90,21 @@
-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+
*/
@ -107,29 +121,6 @@
-ms-grid-column: 1;
-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 {
@ -141,6 +132,11 @@
&__sidebar-link {
cursor: pointer;
display: none;
@include desktop {
display: flex;
}
}
}
</style>

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

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

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

@ -65,21 +65,63 @@
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.top-navigation {
.content-navigation {
display: flex;
align-items: center;
&__link {
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: &;
&--mobile {
&--sidebar {
flex-direction: column;
#{$parent}__primary, #{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
}
#{$parent}__link {
color: $color-white;
@include heading-4;
line-height: 2.5em;
padding: 0;
@ -93,20 +135,21 @@
}
#{$parent}__item {
border-bottom: 1px solid $color-white;
width: 100%;
//border-bottom: 1px solid $color-white;
&:nth-child(1) {
order: 3;
border-bottom: 0;
}
/*&:nth-child(1) {*/
/* order: 3;*/
/* border-bottom: 0;*/
/*}*/
&:nth-child(2) {
order: 1;
}
/*&:nth-child(2) {*/
/* order: 1;*/
/*}*/
&:nth-child(3) {
order: 2;
}
/*&:nth-child(3) {*/
/* order: 2;*/
/*}*/
}
}
}

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

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

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

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

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

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

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

@ -76,62 +76,71 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.profile-sidebar {
padding: $large-spacing 0;
box-sizing: border-box;
position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 100vh;
background-color: $color-white;
z-index: 15;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
overflow-y: scroll;
.profile-sidebar {
padding: $large-spacing 0;
box-sizing: border-box;
position: fixed;
right: 0;
top: 0;
bottom: 0;
height: 100vh;
background-color: $color-white;
z-index: 15;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
overflow-y: scroll;
width: 100%;
@include desktop {
width: 333px;
width: 100%;
@include desktop {
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>

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

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

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

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

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

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