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;
&__logout {
@include default-link;;
@include default-link;
cursor: pointer;
}
}

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

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

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

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

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

@ -2,8 +2,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
id="shape">
class="cross">
<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"/>
</svg>
</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>
<div
v-click-outside="closeSidebar"
class="profile-sidebar"
v-if="sidebar.profile">
<a
class="profile-sidebar__close-link"
@click="close">
<cross class="profile-sidebar__close-icon"/>
</a>
<div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/>
<div
class="profile-sidebar__item"
@click="close">
<router-link
to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten
</router-link>
</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
v-click-outside="closeSidebar"
class="profile-sidebar"
v-if="sidebar.profile">
<a
class="profile-sidebar__close-link"
@click="close">
<cross class="profile-sidebar__close-icon"/>
</a>
<div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/>
<div
class="profile-sidebar__item"
@click="close">
<router-link
to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten
</router-link>
</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>
<script>
import ProfileWidget from '@/components/profile/ProfileWidget';
import Cross from '@/components/icons/Cross';
import ProfileWidget from '@/components/profile/ProfileWidget';
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 LogoutWidget from '@/components/LogoutWidget';
import sidebarMixin from '@/mixins/sidebar';
import LogoutWidget from '@/components/LogoutWidget';
export default {
export default {
mixins: [sidebarMixin],
mixins: [sidebarMixin],
components: {
LogoutWidget,
ClassSelectionWidget,
ProfileWidget,
Cross
},
components: {
LogoutWidget,
ClassSelectionWidget,
ProfileWidget,
Cross
},
methods: {
close() {
this.closeSidebar('profile')
}
},
}
methods: {
close() {
this.closeSidebar('profile')
}
},
}
</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;
}
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;
}
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;
}
&__support {
padding: $medium-spacing;
@include regular-text;
color: $color-silver-dark;
}
}
</style>

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

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

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

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