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

Set fixed dimensions for cross icon

This commit is contained in:
Ramon Wenger 2020-06-03 10:57:30 +02:00
parent f0cf98f80a
commit 26bb96b025
7 changed files with 136 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,7 @@
align-items: center; align-items: center;
&__logout { &__logout {
@include default-link;; @include default-link;
cursor: pointer; cursor: pointer;
} }
} }

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

@ -121,11 +121,6 @@
align-content: center; align-content: center;
} }
&__close-icon {
width: 40px;
height: 40px;
}
&__footer { &__footer {
grid-area: footer; grid-area: footer;
-ms-grid-row: 3; -ms-grid-row: 3;

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

@ -97,11 +97,5 @@
justify-self: center; justify-self: center;
cursor: pointer; cursor: pointer;
} }
&__close-icon {
width: 30px;
height: 30px;
opacity: 0.5;
}
} }
</style> </style>

10
client/src/components/icons/Cross.vue
View File

@ -2,8 +2,16 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" viewBox="0 0 100 100"
id="shape"> class="cross">
<path <path
d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/> d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/>
</svg> </svg>
</template> </template>
<style scoped lang="scss">
.cross {
width: 30px;
height: 30px;
opacity: 0.5;
}
</style>

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

@ -1,150 +1,144 @@
<template> <template>
<div <div
v-click-outside="closeSidebar" v-click-outside="closeSidebar"
class="profile-sidebar" class="profile-sidebar"
v-if="sidebar.profile"> v-if="sidebar.profile">
<a <a
class="profile-sidebar__close-link" class="profile-sidebar__close-link"
@click="close"> @click="close">
<cross class="profile-sidebar__close-icon"/> <cross class="profile-sidebar__close-icon"/>
</a> </a>
<div class="profile-sidebar__section"> <div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/> <profile-widget class="profile-sidebar__item"/>
<div <div
class="profile-sidebar__item" class="profile-sidebar__item"
@click="close"> @click="close">
<router-link <router-link
to="/me/activity" to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten class="profile-sidebar__link">Meine Aktivitäten
</router-link> </router-link>
</div> </div>
</div>
<div class="profile-sidebar__section">
<div class="profile-sidebar__item">
<class-selection-widget/>
<div @click="close">
<router-link
:to="{name: 'my-class'}"
class="profile-sidebar__link">Klassenliste
</router-link>
</div>
</div>
</div>
<div class="profile-sidebar__section">
<div
class="profile-sidebar__item"
@click="close">
<router-link
:to="{name:'join-class'}"
data-cy="join-class-link"
class="profile-sidebar__link">Zugangscode
</router-link>
</div>
<div class="profile-sidebar__item">
<logout-widget/>
</div>
<p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch
</p>
</div>
</div> </div>
<div class="profile-sidebar__section">
<div class="profile-sidebar__item">
<class-selection-widget/>
<div @click="close">
<router-link
:to="{name: 'my-class'}"
class="profile-sidebar__link">Klassenliste
</router-link>
</div>
</div>
</div>
<div class="profile-sidebar__section">
<div
class="profile-sidebar__item"
@click="close">
<router-link
:to="{name:'join-class'}"
data-cy="join-class-link"
class="profile-sidebar__link">Zugangscode
</router-link>
</div>
<div class="profile-sidebar__item">
<logout-widget/>
</div>
<p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch
</p>
</div>
</div>
</template> </template>
<script> <script>
import ProfileWidget from '@/components/profile/ProfileWidget'; import ProfileWidget from '@/components/profile/ProfileWidget';
import Cross from '@/components/icons/Cross'; import Cross from '@/components/icons/Cross';
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget'; import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
import sidebarMixin from '@/mixins/sidebar'; import sidebarMixin from '@/mixins/sidebar';
import LogoutWidget from '@/components/LogoutWidget'; import LogoutWidget from '@/components/LogoutWidget';
export default { export default {
mixins: [sidebarMixin], mixins: [sidebarMixin],
components: { components: {
LogoutWidget, LogoutWidget,
ClassSelectionWidget, ClassSelectionWidget,
ProfileWidget, ProfileWidget,
Cross Cross
}, },
methods: { methods: {
close() { close() {
this.closeSidebar('profile') this.closeSidebar('profile')
} }
}, },
} }
</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;
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;
}
&__support {
padding: $medium-spacing;
@include regular-text;
color: $color-silver-dark;
}
}
</style> </style>

5
client/src/layouts/FullScreenLayout.vue
View File

@ -45,11 +45,6 @@
display:flex; display:flex;
justify-content:end; justify-content:end;
&__icon {
width: 40px;
height: 40px;
}
} }
</style> </style>

5
client/src/layouts/SimpleLayout.vue
View File

@ -71,10 +71,5 @@
margin-right: $medium-spacing; margin-right: $medium-spacing;
margin-top: $medium-spacing; margin-top: $medium-spacing;
} }
&__icon {
width: 40px;
height: 40px;
}
} }
</style> </style>