~timharek/5545.no

ef606887e88920f894afe541d4148063cfc40d8d — Tim 4 years ago 7c446b8
Made the nowcast responsive
3 files changed, 127 insertions(+), 32 deletions(-)

M css/style.css
M css/style.scss
M index.html
M css/style.css => css/style.css +65 -16
@@ 31,7 31,7 @@ header h1 {
}

.wrapper {
  padding-top: 20px;
  padding: 20px;
  margin: 0 auto;
  max-width: 900px;
  /* display: flex;


@@ 40,19 40,21 @@ header h1 {
}

.wrapper .nowcast {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  /* display: flex;
    justify-content: center;
    align-content: center;
    align-items: center; */
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas: "weatherType temp rain wind";
  position: relative;
  padding: 20px;
  padding: 30px;
  max-width: 100%;
  border: 1px solid #c3c3c3;
  border-radius: 10px;


@@ 60,28 62,51 @@ header h1 {
  margin-bottom: 20px;
}

.wrapper .nowcast .temp {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: temp;
}

.wrapper .nowcast .rain {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: rain;
}

.wrapper .nowcast .wind {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: wind;
}

.wrapper .nowcast .from-to {
  position: absolute;
  padding: 10px;
  top: 0;
  /* left: 0; */
  left: 0;
}

.wrapper .nowcast .from-to,
.wrapper .nowcast .from-to i {
.wrapper .nowcast .from-to, .wrapper .nowcast .from-to i {
  font-size: 16px;
}

.wrapper .nowcast img {
.wrapper .nowcast .weatherType {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: weatherType;
  width: 90px;
  margin-right: 20px;
}

.wrapper .nowcast .unit,
.wrapper .nowcast i {
.wrapper .nowcast .unit, .wrapper .nowcast i {
  font-size: 24px;
}

.wrapper .nowcast i {
  color: #212121;
}

.wrapper .nowcast .type {
  font-size: 60px;
  display: -webkit-box;


@@ 96,6 121,30 @@ header h1 {
  margin-right: 20px;
}

@media screen and (max-width: 690px) {
  .wrapper .nowcast {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "weatherType temp" "weatherType rain" "weatherType wind";
  }
  .wrapper .nowcast .type {
    font-size: 32px;
    -ms-grid-column-align: start;
        justify-self: start;
  }
  .wrapper .nowcast .type:not(:last-child) {
    margin: 0;
  }
  .wrapper .nowcast i {
    text-align: center;
    min-width: 25px;
    font-size: 16px;
  }
  .wrapper .nowcast .unit {
    font-size: 20px;
  }
}

.wrapper .forecast-table {
  padding: 10px;
  border: 1px solid #c3c3c3;

M css/style.scss => css/style.scss +57 -11
@@ 40,7 40,7 @@ header {
}

.wrapper {
  padding-top: 20px;
  padding: 20px;
  margin: 0 auto;
  max-width: 900px;



@@ 49,13 49,21 @@ header {
  align-items: center;*/

  .nowcast {
    display: flex;
    /* display: flex;
    justify-content: center;
    align-content: center;
    align-items: center; */
    display: grid;
    align-items: center;
    justify-items: center;

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "weatherType temp rain wind";

    position: relative;

    padding: 20px;
    padding: 30px;
    max-width: 100%;
    border: 1px solid #c3c3c3;
    border-radius: 10px;


@@ 63,27 71,40 @@ header {

    margin-bottom: 20px;

    .temp {
        grid-area: temp;
    }
    .rain {
        grid-area: rain;
    }
    .wind {
        grid-area: wind;
    }

    .from-to {
      position: absolute;
      padding: 10px;
      top: 0;
      /* left: 0; */
      &,
      i {
      left: 0;
      &, i {
        font-size: 16px;
      }
    }

    img {
      width: 90px;
      margin-right: 20px;
    .weatherType {
        grid-area: weatherType;
        width: 90px;
        margin-right: 20px;
    }

    .unit,
    i {
    .unit, i {
      font-size: 24px;
    }

    i {
        color: $primary-dark-color;
    }

    .type {
      font-size: 60px;
      display: flex;


@@ 93,6 114,31 @@ header {
        margin-right: 20px;
      }
    }

    @media screen and (max-width: 690px){
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "weatherType temp"
        "weatherType rain"
        "weatherType wind";

        .type {
            font-size: 32px;
            justify-self: start;

            &:not(:last-child) {
                margin: 0;
            }
        }
        i {
            text-align: center;
            min-width: 25px;
            font-size: 16px;
        }
        .unit {
            font-size: 20px;
        }
    }
  }

  .forecast-table {

M index.html => index.html +5 -5
@@ 21,16 21,16 @@
        <div class="from-to">
          <i class="far fa-clock"></i> {{ nowcast.from }}-{{ nowcast.to}}
        </div>
        <img :src="nowcast.weatherImg" alt="" />
        <div class="type">
        <img :src="nowcast.weatherImg" class="weatherType" alt="" />
        <div class="type temp">
          <i aria-hidden="true" class="fas fa-thermometer-three-quarters"></i>
          <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}<span class="unit">&deg;C</span></span>
          <span class="temp">{{ nowcast.temperature.toLocaleString('no-NB') }}&deg;</span>
        </div>
        <div class="type">
        <div class="type rain">
          <i aria-hidden="true" class="fas fa-umbrella"></i>
          <span class="rain">{{ nowcast.rain.toLocaleString('no-NB') }}<span class="unit">mm</span></span>
        </div>
        <div class="type">
        <div class="type wind">
          <i class="fas fa-wind"></i>
          <span class="wind">{{ nowcast.wind.toLocaleString('no-NB') }}<span class="unit">m/s</span></span>
        </div>