openstapps/src/app/modules/profile/page/profile-page.scss

/*!
 * Copyright (C) 2023 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/>.
 */
:host {
  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 {
    margin-bottom: 0;
    .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 bottom;
        }

        .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-item-background);
        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-item-background-color-contrast);
          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-item-background);
        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-item-background-color-contrast);
          text-align: center;

          &.no-course {
            padding: var(--spacing-xxl) var(--spacing-lg);
          }

          &.last {
            margin-bottom: var(--spacing-xl);
          }
        }
      }
    }
  }
}