Group session July 1st

Hi, there. You're not logged in. So, you must be a visitor. Welcome!

What is this? You are viewing one of our supplemental "Stories." In addition to our core design curriculum, we are constantly building out additional resources. Stories are a collection of real work tasks, design history, UX explorations, and work-throughs. Stories are often off-the-cuff and less concerned with production value.

This is in the works! Would you like to help flesh it out? Let's do it!

Video in the works!

Theirs

HTML

<div class="popup">
    <i class="close-popup fa-solid fa-x"></i>
    <h1>Insert your memory about this place</h1>
    <input
        type="text"
        class="input"
        placeholder="Please insert your memory here"
    />

    <button type="submit" class="add-memory-button">Add memory</button>
</div>

<div class="container">
    <div class="left-container">
        <h1 class="info-left-h1">
            Click on the map to create a memory location!
        </h1>
        <div class="memory-container"></div>
    </div>
    <div id="map"></div>
</div>

There are many types of pop-ups. Pretty much everything is a container. Things that are sometimes on the left – aren’t always on the left at every break-point. Forms should use the proper elements for many reasons including accessibility.

The amount of code is pretty good though! Sometimes people will have four times the code for this same thing somehow.

Their CSS with our review

CSS

* {
    box-sizing: border-box; /* you absolutely need this - look it up */
}

html body { /* there's no need to say "any body inside of an html"
    /* you can just use 'body' as the selector */
    font-family: Arial, Helvetica, sans-serif;
    width: 100vw; /* it's already 100% width by default */
    height: 100vh; /* should likely be min-height */
    margin: 0px;
    padding: 0px; /* these should likely be taken care of by a css-reset (I use meyer-reset) */
}

.container { /* container is a bad name. everything is a container */
    width: 100%;
    height: 100%; /* these are suspect - why are they needed ? */
    display: flex;
    flex-direction: row;
}

.left-container::-webkit-scrollbar {
    display: none;
}

.left-container { /* left-container is a bad name - what if it's not left at a different break point? also / I don't know what it's for. Is it a 'sidebar' - or what is its actual purpose? name it with that */
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: rgb(34, 193, 195);
    background: linear-gradient(
        0deg,
        rgba(34, 193, 195, 1) 0%,
        rgba(253, 187, 45, 1) 100%
    );
    width: 35%;
    height: 100%; /* likely not needed... based of of a previous decision */
    max-height: fit-content; /* maybe needed */
    overflow-y: scroll;
}

h1 {
    font-size: 2vw; /* probably should use clamp here for min/max */
    color: white; /* should be a custom-property for site-wide colors */
    position: relative;
    top: 40%; /* sounds scary! */
    text-align: center;
}

.memory-container { /* again... "container" doesn't help me know what this is */
    width: 100%; /* aren't all block-level elements width:100% already? */
    max-height: fit-content;
    min-height: 400px;
}

.memory-div::-webkit-scrollbar {
    display: none; /* this sounds like bad news */
}
.memory-div { /* even worse name than container */
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 90%;
    max-height: 100px;
    min-height: 60px;
    background: rgba(255, 213, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.6px);
    -webkit-backdrop-filter: blur(3.6px);
    border: 1px solid rgba(255, 213, 0, 0.19);
    margin: 20px;
    word-wrap: break-word;
    overflow: scroll;
    display: flex;
    flex-direction: row;
}

.memory-div:hover {
    background: rgba(152, 128, 6, 0.08);
    border: 2px solid white;
}

.paragraph-left { /* again - keep the visual out of the selector names */
    display: flex;
    width: 72%;
    color: white;
    text-align: center; /* centered paragraphs? */
    font-size: x-large; /* probably don't use these... */
    justify-content: center;
    flex-direction: row;
    margin: 14px;
    word-break: break-word;
}
.fa-sharp { /* I'd suggest SVG sprite over fa as it seems to break a lot */
    display: flex;
    font-size: 40px;
    color: white;
    margin: 10px;
    width: 30px;
    justify-content: center;
    position: sticky;
}

#trash { /* avoid ids in your CSS */
    display: flex;
    margin-top: 15px;
    font-size: x-large;
    color: white;
}
#trash:hover {
    color: rgb(211, 211, 211);
}

.popup {
    width: 79vw; /* this seems very 'magic' and is suspect */
    height: 100vh;
    position: fixed;
    left: 30%;
    background: rgb(2, 233, 237);
    background: linear-gradient(
        0deg,
        rgb(0, 251, 255) 0%,
        rgb(244, 172, 18) 100%
    );
    opacity: 90%;
    z-index: 1;
    display: none;
}

.popup input {
    width: 600px;
    height: 150px;
    border-radius: 10px;
    position: relative;
    left: 240px; /* this positioning seems scary and likey to break */
    top: 280px; /* how about using grid instead */
    border: 2px solid #ffffff; /* border width and color should be custom -properties */
    background-color: #fdbb2d;
    color: white;
}

.popup h1 {
    display: inline-block;
    left: 160px; /* brittle */
    top: 20%;
    font-size: 40px;
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif; /* already on the body in your case */
    opacity: 100%; /* why? */
}

.add-memory-button { /* could also be button.add-memory  - but either way - this was a good selector because I knew what it did / but is the "add" really relevant - should there be a global .button type class? */
    width: 220px;
    height: 40px;
    position: absolute; /* there is probably a better way for this */
    bottom: 200px;
    left: 420px;
    background-color: rgba(253, 187, 45, 1);
    border: 1px solid white;
    border-radius: 10px;
    color: white;
    font-size: 20px;
}

.popup button:hover {
    background-color: rgb(247, 168, 0);
    border: 2px solid white;
}
.popup button:active {
    background-color: rgb(194, 132, 0);
    border: 2px solid white;
}

.close-popup { /* these should probably be scoped to the pop-up module or something so that they aren't global */
    color: white;
    font-size: 40px;
    position: relative;
    left: 940px;
    top: 40px;
}
.close-popup:hover {
    color: rgb(210, 210, 210);
    font-size: 40px;
    position: relative;
}
#map {
    width: 80%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    z-index: 0;
}

/* PHONE RESPONSIVE */ /* I HIGHLY suggest working from small screen up - instead of the larger screen and then putting in these overrides */
@media (max-width: 420px) {
    html body {
        overflow: hidden;
        height: 100vh;
        width: 100vw;
    }
    .container {
        z-index: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    #map {
        z-index: 0;
        display: flex;
        height: 50%;
        width: 420px;
        overflow: hidden;
    }
    .left-container {
        display: flex;
        overflow: scroll;
        height: 50%;
        width: 100%;
    }

    .info-left-h1 {
        font-size: 10vw;
        position: relative;
        left: 20%;
        top: 100px;
        height: 10px;
    }

    .popup {
        display: none;
        position: fixed;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: 1;
        flex-direction: column;
    }

    .close-popup {
        font-size: 30px;
        margin-left: 100px;
        left: 60%;
    }

    .popup h1 {
        left: 0px;
        width: 100%;
        font-size: 10vw;
    }

    .popup input {
        position: relative;
        left: 0px;
        top: 200px;
        width: 100%;
    }

    .add-memory-button {
        position: relative;
        left: 100px;
        top: 40%;
    }

    .memory-container {
        width: 100%;
        height: 100%;
    }
}

/* TABLET RESPONSIVE */ /* I HIGHLY recommend not targeting devices like this - and instead just building up organically from small>medium>large etc -- and it'll be easier to write and maintain */

@media (min-device-width: 540px) and (max-device-width: 1024px) {
    html body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
    }

    .left-container {
        width: 100%;
        height: 50%;
    }

    .info-left-h1 {
        font-size: 5vw;
    }

    .popup {
        width: 100%;
        height: 100%;
        left: 0px;
    }

    .popup h1 {
        font-size: 6vw;
        left: 0px;
    }

    .popup input {
        left: 12%;
    }
    .add-memory-button {
        left: 36%;
    }

    .close-popup {
        font-size: 60px;
        left: 90%;
    }
    #map {
        width: 100%;
        height: 50%;
    }
}

320+ lines of code (for a thing that is broken and mostly unusable)

Ours

HTML

<aside class='sidebar'>
	<h1 class='loud-voice'>App name</h1>
	<h2 class='calm-voice'>Add a pin to the map etc...</h2>
</aside>	


<main>
	<section class='map'>
		MAP HERE...
	</section>
	
	<section class='writing-area'>
		<button data-action='close'>close</button>

		<form>
			<div class='form-field'>
				<label for='message'>Share your memory of this place?</label>
				<textarea id='message'></textarea>
			</div>

			<button type='submit'>Submit</button>
		</form>
	</section>
</main>

Here’s our version. What do you think? Could it be better!?

Our take on the CSS

CSS

/* reset added in cog ^ */


/* SETUP */
* {
	box-sizing: border-box;
}


/* SETTINGS like variables and stuff */
html {
	--ink: black;
	--color: rgba(34, 193, 195, 1);
	--highlight: rgba(253, 187, 45, 1);
	--gradient: 
		linear-gradient(
			0deg,
			var(--color) 0%,
         var(--highlight) 100%
    );
	--neutral: #fddad4;
}	



/* STRUCTURE */
/* if you want to just take up the available space */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body * {
	color: var(--ink); /* crazy idea */
}

main {
	flex-grow: 1; /* that'll stretch to fill the remaining space */
}

main {
	display: grid;
	grid-template-areas: 'center';
}

.map, .writing-area {
	grid-area: center;
}



/* TYPOGRAPHY */
.calm-voice, p {
	font-size: 1rem;
}
@media (min-width: 600px) {
	.calm-voice, p {
		font-size: 1.1rem;
	}
}

.loud-voice {
	font-size: 2rem;
}
@media (min-width: 600px) {
	.loud-voice {
		font-size: 3rem;
	}
}



/* STYLE */
.sidebar {
	padding: 20px;
	background: var(--gradient);
	--ink: white; /* just something to play with... */
}

main {
	--ink: var(--color);
}

.map {
	background-color: var(--neutral);
}

.writing-area {
	background-color: rgba(0,0,0,.5);
	padding: 30px;
	
	display: grid;
	place-items: center;
}

.writing-area form {
	display: grid;
	gap: 20px;
}

.writing-area form * {
	justify-self: start;
}

.writing-area form .form-field {
	display: grid;
	gap: 20px;
}

.writing-area form textarea {
	display: block;
	width: 100%; /* of parent... */
	resize: vertical; /* don't allow people to resize width */
}

/* any nessesary evils seperate */
.writing-area {
	position: relative;
}
.writing-area [data-action='close'] {
	position: absolute;
	top: 20px;
	right: 20px;
}


/* dev notes for you */
note::after {
	display: block;
	content: "I'm not sure how you want to do this. There are many ways... but on small screens - it'll depend on your header and layout space --- ";
	padding: 20px;
}


/* ITERATIONS */
.writing-area {
	opacity: 0;
	pointer-events: none;
}

body.modal-open .writing-area {
	opacity: 1;
	pointer-events: initial;
}



/* FIRST BREAK POINT */
@media (min-width: 700px) { /* or whatever works */

	body {
		display: grid;
		/* removes flex stuff */
		grid-template-columns: 300px auto;
	}
	
	note::after {
		content: "";
	}

}

Less than half the code – and much more resilient.

Group session July 1st