Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using css variables, cleaning up repeated lines, tiny bug fixes #59

Merged
merged 10 commits into from
May 25, 2022
Merged

Using css variables, cleaning up repeated lines, tiny bug fixes #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6907e01
Merge pull request #57 from ShakeGuard/dev
nok-ko May 20, 2022
92fcd29
Update readme.txt for hand-in
AlexLLKong May 20, 2022
e708f14
Update header nav placement in index, index/login image, remove a:but…
speakingoftime May 24, 2022
b03f5c1
Add alterative font families for Satoshi, Sharpie
speakingoftime May 24, 2022
485e22a
Delete unused photos, resize Resource photos
speakingoftime May 25, 2022
5a70c87
Moved link 'header-footer.css' to be imported in 'style.css', other m…
speakingoftime May 25, 2022
27b3f23
Add missing class, remove unneeded Google icon
speakingoftime May 25, 2022
3328864
Add and use css variables across all stylesheets, clean up repeated css
speakingoftime May 25, 2022
42e7d26
Add back 'logout.js' removed accidentally in previous commits
speakingoftime May 25, 2022
428a836
Rename .toggle to .toggle-profile-form to prevent interference with nav
speakingoftime May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions html/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link href="/images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<title>Dashboard</title>

<link href="/css/header-footer.css" rel="stylesheet" />
<link href="css/user-profile.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="/css/admin-dashboard.css" rel="stylesheet" />
Expand Down Expand Up @@ -49,8 +48,8 @@ <h1>Your Kits</h1>
<p>Remember to check and <span class="emphasis">replace expired supplies</span> (including the water!).</p>
</div>
<div class="empty-kit-message"></div>
<button type="button" class="button button-secondary-teal" id="create-kit-button">
<span class="material-symbols-outlined">add</span> Create a kit
<button type="button" class="button button-primary-teal" id="create-kit-button">
+ Create a kit
</button>

<ul id="user-kit-list">
Expand Down
10 changes: 5 additions & 5 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<!-- Our stylesheets -->
<link href="/css/index.css" rel="stylesheet" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />

<!-- Google Material Icons -->
<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down Expand Up @@ -37,17 +37,17 @@ <h1 id="hero-message-heading1">Get ready for the <span class="heading-emphasis">

<!-- Other content -->
<div id="section-container">
<h2 id="section-heading2">or learn more</h2>
<h2 id="section-heading">or learn more about</h2>

<div class="button-group">
<!-- Call-to-action 2 -->
<a href="#" class="button button-secondary block" id="section-button-resources-checklist">
Earthquake kit checklist
<a href="/resource_page3" class="button button-secondary block" id="section-button-resources-checklist">
Emergency kits
</a>

<!-- Call-to-action 3 -->
<a href="/resource" class="button button-secondary block" id="section-button-resources">
Earthquake resources
BC Earthquake resources
</a>
</div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions html/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet"/>
<link href="css/login.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
</head>
Expand All @@ -20,7 +19,7 @@
<img src="../images/ShakeGuard.png" alt="" class="ShakeGuard-Logo">
<input class="Form-Item Grid-Container-Form-Input" id="Email" type="text" required="required" placeholder="Username" value=""/>
<input class="Form-Item Grid-Container-Form-Input" id="Password" type="password" required="required" placeholder="Password" value=""/>
<input class="Form-Item" type="submit" value="Login" id="Button-Login"/>
<input class="Form-Item button button-primary" type="submit" value="Login" id="Button-Login"/>
<p class="Form-Item error" id="Error-Msg">&nbsp;</p>
<p><span class="Form-Item" id="Server-Msg"></span></p>
<h4 class="Form-Item Bottom-Text">Don't have a account?</h4>
Expand Down
1 change: 0 additions & 1 deletion html/resource.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/card.css" rel="stylesheet"/>
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/resource.css">
Expand Down
1 change: 0 additions & 1 deletion html/resource_page1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down
1 change: 0 additions & 1 deletion html/resource_page2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down
3 changes: 1 addition & 2 deletions html/resource_page3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
Expand Down
1 change: 0 additions & 1 deletion html/resource_page4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down
1 change: 0 additions & 1 deletion html/resource_page5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down
1 change: 0 additions & 1 deletion html/resource_page6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="/css/header-footer.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/all_resource_pages.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
Expand Down
3 changes: 1 addition & 2 deletions html/user-profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link href="images/comp2800_logo_favicon.ico" rel="icon" type="image/x-icon" />
<link href="css/user-profile.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="/css/header-footer.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
Expand All @@ -31,7 +30,7 @@ <h1>Your Kits</h1>
</div>
<div class="empty-kit-message"></div>
<button type="button" class="button button-secondary-teal" id="create-kit-button">
<span class="material-symbols-outlined">add</span> Create a kit
+ Create a kit
</button>

<ul id="user-kit-list">
Expand Down
60 changes: 20 additions & 40 deletions public/css/admin-dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,15 @@
@import url('https://api.fontshare.com/css?f[]=satoshi@400,401,700,701&display=swap');
@import url('https://api.fontshare.com/css?f[]=sharpie@400,700&display=swap');


Comment on lines -1 to -4
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is now under style.css

:root {
--color-primary: rgb(23, 165, 186);
--color-secondary: rgb(251, 179, 59);
--color-error: rgb(235, 65, 13);
--color-success: rgb(18, 210, 164);
--toast-text: white;
--nice-drop-shadow: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.1));

--color-unfocused: rgba(0,0,0,0.5);
--color-text: rgba(0,0,0,1);
}


body {
margin: 0;
padding: 0;
font-family: 'Satoshi', sans-serif;
font-weight: 400;
}

h1 {
text-align: center;
}

#dashboard-grid {
display: grid;
grid-template-columns: 10% minmax(0, 1fr) 10%;
grid-template-columns: 10vw minmax(0, 1fr) 10vw;
margin-bottom: 20vh;
}

Expand Down Expand Up @@ -62,7 +43,7 @@ h1 {
display: flex;
align-items: center;
justify-content: center;
color: var(--toast-text);
color: var(--text-light);
}

/* Admin user list */
Expand All @@ -71,11 +52,11 @@ h1 {
}

.toast-info {
background-color: var(--color-primary);
background-color: var(--color-teal);
}

.toast-warning {
background-color: var(--color-secondary);
background-color: var(--color-yellow);
}

.toast-error {
Expand All @@ -87,6 +68,7 @@ h1 {
}

#user-list-panel {
width: 100%;
margin-top: 10%;
margin-bottom: 5%;
grid-column: 2 / span 1;
Expand All @@ -97,7 +79,7 @@ h1 {
padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 5%;
gap: var(--p-sm);
}

#user-list-header {
Expand All @@ -108,13 +90,13 @@ h1 {

.user-item {
display: grid;
grid-template-columns: minmax(0, 1fr) 10%;
grid-template-columns: minmax(0, 1fr) 3rem;
align-items: center;
gap: 1rem;
padding: 5%;
border-radius: 1.5rem;
background-color: white;
filter: var(--nice-drop-shadow);
padding: 1rem;
border-radius: var(--border-rad-sm);
background-color: var(--bg-light);
filter: var(--shadow-light);
}

.user-item-name-pic {
Expand All @@ -133,14 +115,13 @@ h1 {
}

.admin-name:focus {
font-weight: 700;
color: var(--color-text);
font-weight: var(--ff-bold);
color: var(--text-dark);
}


.edit-button-group button {
color: black;
margin: 0;
width: 100%;
}


Expand All @@ -163,28 +144,27 @@ h1 {

/* For medium screens */
@media only screen and (min-width: 768px) {
#dashboard-grid {
gap: var(--p-med);
}
#user-list {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--p-med);
}

#user-list-header {
flex-direction: row;
}

.user-item-name-pic {
gap: 5%;
}
.user-item-name {
font-size: 1.4em;
gap: 0.5rem;
}
}

/* For larger screens */
@media only screen and (min-width: 1200px) {
#dashboard-grid {
grid-template-columns: 15% minmax(0, 1fr) 15%;
}
.user-item-name-pic {
gap: 3%;
gap: var(--p-lg);
}
}
48 changes: 14 additions & 34 deletions public/css/all_resource_pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
body{
margin: 0;
padding: 0;
display: grid;
place-self: center;
}

a, a:visited{
color: #17A5BA;
color: var(--color-teal);
}

#Base-Container{
display: grid;
grid-template-columns: 1fr;
filter: drop-shadow(0.3em 0.3em 0.5em rgba(0, 0, 0, 0.15));
background-color: white;
border-radius: 3em;
width: 80vw;
filter: var(--shadow-dark);
background-color: var(--bg-light);
border-radius: var(--border-rad-sm);
margin-bottom: 1em;
margin-left: 1.5em;
margin-right: 1.5em;
margin-left: auto;
margin-right: auto;
}

#Article-Container{
Expand All @@ -27,7 +26,6 @@ a, a:visited{

.Article-Continer-Content{
text-align: start;
font-size: 20px;
margin: 1.5em;
}

Expand All @@ -48,14 +46,14 @@ a, a:visited{
}

#Back-Link{
color: #000000;
color: var(--text-dark);
justify-self: end;
margin-right: 0.15em;
}

.material-symbols-outlined{
grid-column: 2 / span 1;
color: #000000;
color: var(--text-dark);
font-size: 2em !important;
align-self: center;
font-variation-settings:
Expand All @@ -67,42 +65,24 @@ a, a:visited{
}

#Link:hover > #Back-Link{
color: #17A5BA;
color: var(--color-teal);
}
#Link:hover > .material-symbols-outlined{
color: #17A5BA;
color: var(--color-teal);
}


@media only screen and (max-width: 768px) {
#Base-Container{
width: auto;
}
.Article-Continer-Content{
text-align: start;
font-size: 20px;
margin: 1em;
}
}

@media only screen and (min-width: 768px) {
#Base-Container{
width: auto;
width: 60vw;
}
.Article-Continer-Content{
text-align: start;
font-size: 22px;
margin: 1.5em;
}
}

@media only screen and (min-width: 1200px) {
#Base-Container{
width: auto;
}
.Article-Continer-Content{
text-align: start;
font-size: 25px;
margin: 2em;
}
}
Loading