3. Week 3

Dinsdag 2 April

Bouwen

Mediaquery

Op dinsdag was ik begonnen met een aantal kleine aanpassingen maken en daarna was ik verder gegaan met mediaqueries. Ik kwam er al snel achter dat er iets niet klopt in mijn code doordat er een fout was in de specificity, vanwege dat heb ik een deel van mijn code eerst gerefactored.

Refactoring

commit

.section:nth-of-type(2) {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.418), rgba(0, 0, 0, 0.558));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-bottom: 3px solid white; border-top: 3px solid white; width: 100%;
    align-items: center; display: flex; flex-direction: column; justify-content: center;

    h3, p, a {
        color: var(--black);
     
        h3 {
            max-width: 300px;
          } 
    }

    .story-head {
        align-items: center; background-color: black; display: flex; flex-direction: column;
        justify-content: center; padding: 0 0 2em 0; width: 100%;

        h2 {
            text-transform: uppercase; width: 11em;
            max-width: 60rem; margin: .75em 0;
          }

        form {
            display: flex; flex-wrap: nowrap; flex-direction: row; gap: 1em; width: 88dvw;
            overflow: scroll; justify-content: start; scroll-snap-type: x mandatory;

            > button {
                align-items: center; background-color: var(--white); border-radius: var(--radius-2); display: flex;
                flex-direction: row; justify-content: center; padding: .15em .5em; scroll-snap-align: center;
                scrollbar-width: none;

                > img {
                    border-radius: var(--radius-3); object-fit: cover; height:1em;
                    width: 2em;margin: 0 .5em 0 0;
                }
            }
        }

        form::-webkit-scrollbar {
            display: none;
       }
    } /* story-head end tag  */

    .story-container {
        display: flex; flex-wrap: nowrap; height: 22.5em; width: 100%; gap: .5em;
        scroll-snap-type: x mandatory; overflow: scroll; justify-content: center;
        margin: 2em 0 0 0;

        > .indicator {
            border-radius: var(--radius-2); width: 20px; height: 400px; scroll-snap-align: start;
            transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1); overflow: hidden;
        }

        .gallery {
            display: flex; justify-content: space-between;
            width: 100%; overflow-x: scroll;
        }

        .gallery-item {
            display: -webkit-inline-box; justify-content: center; align-items: start; height: 320px;
            margin: 0 5px; overflow: hidden; background-color: var(--white);
            border-radius: 2px; position: relative;
        }

        .story-img {
            width: 200px; height: 130px; object-fit: contain; transform: scale(2);
        }

        .indicator:hover {
            width: 200px;

            .gallery-content {
                display: flex; flex: wrap; flex-direction: row; background-color: var(--white); width: 200px;
                height: 140px; position: absolute; bottom: 0em; z-index: 10;

                .story-header {
                    display: flex; justify-content: space-between; width: 17em; padding: .5em 1em 0;
                }

                .lang-img {
                    width: 3em; height: 2em; object-fit: cover; padding: .5em 0 0 0;
                }

                .story-sum {
                    font-weight: 100; max-width: 190px; white-space: nowrap;
                    overflow: hidden; text-overflow: ellipsis; padding: .5em 1em 0;
                }

                .sub-buttons {
                    display: flex; flex-direction: row; justify-content: space-around; margin: 1em 0 0 0;
                    width: inherit; gap: 1em; position: absolute; bottom: 1em; right: 1em; 
                
                    p {
                        margin: .20em 1em 0 0;
                    }

                    button {
                        margin: .25em 0 0 0;
                      }
                }
            }

        }
    }
    ul::-webkit-scrollbar {
        display: none;
      }
      
      .tab-buttons {
        display: flex; flex-direction: row; gap: 7em; margin: 0 0 2em 0;
    
      > button {
        background-color: var(--white); color: var(--black); font-size: 18px;
        padding: .5em .75em; border-radius: var(--radius-2);
      }  
    } 
}  

Responsive

Mobile -Tablet (not finished version)

Woensdag 3 April

Testen

Webbrowsers

Firefox, Chrome & Vivaldi

Als eerste heb ik firefox getest, het design is compleet hetzelfde en de functies (playlist liken) werken nogsteeds. Verder werkt de clientside Javascript ook nogsteed en alle hovers (CSS) werken ook. Daarna heb ik Chrome getest, hier was het resultaat hetzelfde als Firefox. In Vivaldi was het resultaat hetzelfde als de voorgaande browsers, ook heb ik 'vertaal pagina' getest via Vivaldi, als je dit doet ontstaan er een 1 error in het design, bij stories komt de titel en summary op de verkeerde plaatst te staan. Voor de rest was alles werkend.

Safari

Als ik aan het coderen ben check ik de voortgang via Safari hierdoor zijn de functies, hovers en design de standaard en is alles werkend.