mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-23 01:53:00 +00:00
Thea Schöbl
committed by
Jovan Krunić
Jovan Krunić
parent
6b9b1fa854
commit
e395e9d270
211
src/app/modules/profile/page/profile-page.scss
Normal file
211
src/app/modules/profile/page/profile-page.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
/*!
|
||||
* Copyright (C) 2022 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||
* more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
@import "src/theme/common/ion-content-parallax";
|
||||
|
||||
:host {
|
||||
ion-content {
|
||||
--background: var(--ion-color-light);
|
||||
|
||||
@include ion-content-parallax($content-size: 130px)
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: calc(2 * var(--spacing-lg) - var(--spacing-md));
|
||||
padding: var(--spacing-md);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.section-headline {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
.user-card-wrapper {
|
||||
.user-card {
|
||||
border-radius: var(--border-radius-default);
|
||||
position: relative;
|
||||
margin: 0;
|
||||
box-shadow: var(--shadow-profile-card);
|
||||
max-width: 400px;
|
||||
|
||||
ion-card-header {
|
||||
--background: var(--ion-color-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: var(--spacing-sm);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
|
||||
ion-img {
|
||||
display: block;
|
||||
height: 36px;
|
||||
object-position: left 50%;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--ion-color-light);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: 1;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
min-height: 15vh;
|
||||
|
||||
.profile-card-img {
|
||||
position: absolute;
|
||||
opacity: 0.13;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
margin-left: calc(var(--spacing-md) * -4);
|
||||
object-position: left 50%;
|
||||
}
|
||||
|
||||
.main-info {
|
||||
display: grid;
|
||||
grid-template-areas: 'fullName fullName'
|
||||
'matriculationNumber userName'
|
||||
'email email';
|
||||
|
||||
ion-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--ion-color-medium-shade);
|
||||
display: block;
|
||||
}
|
||||
|
||||
ion-text {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--ion-color-text);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.full-name {
|
||||
grid-area: fullName;
|
||||
display: block;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.matriculation-number {
|
||||
grid-area: matriculationNumber;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
grid-area: userName;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.email {
|
||||
grid-area: email;
|
||||
}
|
||||
}
|
||||
|
||||
.log-in-prompt {
|
||||
margin: auto 0;
|
||||
color: var(--ion-color-text);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semi-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-thumbnail {
|
||||
background: var(--placeholder-gray);
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border-radius: var(--border-radius-default);
|
||||
ion-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
ion-row.main-info {
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.courses {
|
||||
.courses-card {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
|
||||
background-color: unset;
|
||||
max-width: 800px;
|
||||
|
||||
ion-card-header {
|
||||
background-color: var(--ion-color-light-contrast);
|
||||
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: var(--ion-color-light);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
ion-icon {
|
||||
color: var(--ion-color-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--ion-color-primary-contrast);
|
||||
border-radius: var(--border-radius-default);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 250ms ease-in-out, padding 250ms ease-in-out, margin 250ms ease-in-out;
|
||||
|
||||
&.show-card {
|
||||
height: 100%;
|
||||
display: block;
|
||||
margin: var(--spacing-xxl);
|
||||
padding:var(--spacing-md);
|
||||
max-height: var(--max-height);
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-black);
|
||||
color: var(--ion-color-light-contrast);
|
||||
text-align: center;
|
||||
|
||||
&.no-course {
|
||||
padding: var(--spacing-xxl) var(--spacing-lg);
|
||||
}
|
||||
|
||||
&.last {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user