Skip to content
This repository has been archived by the owner on Jul 25, 2024. It is now read-only.

refactor(issue-367): clean up flask ui for public preview #371

Merged
merged 7 commits into from
May 9, 2022
Merged

refactor(issue-367): clean up flask ui for public preview #371

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2dd413f
refactor: fixing form inputs, home & campaign styling
pattishin May 5, 2022
0552738
refactor: small styling for view campaign page
pattishin May 6, 2022
850048d
refactor: fixing broken styling on flask error pages
pattishin May 6, 2022
0b6e548
Merge branch 'main' into refactor/issue-367
pattishin May 6, 2022
3e9eb39
Merge branch 'main' into refactor/issue-367
pattishin May 6, 2022
47c053a
refactor: applying pr suggestions
pattishin May 6, 2022
3e9b16a
chore: adding comment ref to issue
pattishin May 9, 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
39 changes: 27 additions & 12 deletions website/static/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,33 @@
limitations under the License.
**/

:root {
--mdc-theme-primary: #306DFD;
}

th,
td,
ul li,
body {
margin: 0;
color: #505050;
font-family: Roboto, sans-serif;
font-display: swap;
font-family: 'Google Sans', sans-serif !important;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it possible to avoid !important here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Not ideal for now, but would like to still apply it for now. Added this in order to make sure the donations table picked this up. I wanted to avoid adding too many css lines to make sure the font was being applied.

Copy link
Contributor

@ace-n ace-n May 9, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Can we leave a TODO comment linking to a GitHub issue to remove the important?

(If and when we deprecate the Flask frontend, we can close that issue + remove the TODO.)

}

a {
color: #505050;
text-decoration: none;
}

body {
margin: 0;
color: #505050;
}

.emblem-message {
width: 100%;
background-color: #efefef;
color: #606060;
display: block;
padding: 0.75em;
font-size: 14px;
text-align: center;
}

Expand Down Expand Up @@ -69,13 +77,15 @@ a {
}

.mdc-list-item {
padding: 15px;
padding: 15px 0;
margin: 0 15px;
}

.emblem-campaign-card {
font-size: 18px;
cursor: pointer;
height: 100%;
padding: 15px;
}

.emblem-campaign-card:hover {
Expand All @@ -84,7 +94,7 @@ a {

/* Title */
.emblem-campaign-card .emblem-campaign-title {
font-size: 30px;
font-size: 25px;
position: relative;
}

Expand All @@ -108,6 +118,13 @@ a {
}

/* Donate button */

.emblem-campaign-card .emblem-campaign-donate {
height: 100%;
display: flex;
align-items: flex-end;
}

.emblem-campaign-card .emblem-campaign-donate a {
color: #6300ee;
}
Expand Down Expand Up @@ -185,10 +202,6 @@ img.emblem-avatar {
}
}

.emblem-campaign-status {
font-weight: bold;
}

.emblem-campaign-details .mdc-list-item {
display: block;
cursor: auto;
Expand Down Expand Up @@ -218,7 +231,7 @@ img.emblem-avatar {
width: 100%;
}

.emblem-new-donation .emblem-donation-buttons {
.emblem-new-donation .emblem-action-buttons {
display: inline-block;
float: right;
}
Expand All @@ -230,6 +243,8 @@ img.emblem-avatar {
}

.emblem-new-campaign-input {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 1em;
}
Expand Down
6 changes: 2 additions & 4 deletions website/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,12 @@
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
<span class="mdc-top-app-bar__title">{{ self.title() }}</span>
<span class="mdc-top-app-bar__title">Emblem Giving</span>
ace-n marked this conversation as resolved.
Show resolved Hide resolved
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a href="/">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Home" title="Home">home</button>
</a>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Help" title="Help">help_outline</button>
<!-- Login controls -->
{% if 'session_id' in request.cookies %}
<!-- Logged in -->
Expand All @@ -67,7 +65,7 @@
{% else %}
<!-- No hidden auth failures; login enabled -->
<a href="/login">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Log In" title="Log In">login</button>
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Log In" title="Log In">person_outline</button>
</a>
{% endif %}
</section>
Expand Down
79 changes: 46 additions & 33 deletions website/templates/create-campaign.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
{% block materialio_scripts %}
<script type="text/javascript" nonce="{{ g.csp_nonce }}">
function initTextFields() {
const MDCTextField = mdc.textField.MDCTextField;
const selectElements = Array.from(document.querySelectorAll('.mdc-select'));
selectElements.map(elem => new mdc.select.MDCSelect(elem));

const elements = Array.from(document.querySelectorAll('.mdc-text-field'));

elements.map(elem => new MDCTextField(elem));
elements.map(elem => new mdc.textField.MDCTextField(elem));
}

window.addEventListener('load', () => {
Expand All @@ -35,16 +36,8 @@
{% block content %}
<div class="emblem-new-campaign mdc-layout-grid">
<div class="mdc-layout-grid__inner">

<!-- Back button -->
<div class="emblem-back-button mdc-layout-grid__cell mdc-layout-grid__cell--span-1">
<a href="/">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Back to campaign list" title="Back to campaign list">highlight_off</button>
</a>
</div>

<!-- Campaign form -->
<div class="emblem-new-campaign-form mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
<div class="emblem-new-campaign-form mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<form method="POST">
<!-- Campaign Name -->
<label class="emblem-new-campaign-input mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
Expand All @@ -58,7 +51,7 @@
<label class="emblem-new-campaign-input mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="campaign-description-label">Campaign Description</span>
<textarea id="description" name="description" rows=8></textarea>
<input required type="text" id="description" name="description" class="mdc-text-field__input" aria-labelledby="description">
<span class="mdc-line-ripple"></span>
</label>

Expand All @@ -71,17 +64,31 @@
</label>

<!-- Causes list -->
<label class="emblem-new-campaign-input mdc-text-field mdc-text-field--filled mdc-text-field--label-floating">
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="campaign-cause-label">Cause for Campaign</span>

<select name="cause" name="cause">
{% for cause in causes %}
<option value="{{ cause.id }}">{{ cause.name }}</option>"
{% endfor %}
</select>

<span class="mdc-line-ripple"></span>
<label class="emblem-new-campaign-input mdc-select mdc-select--filled">
<div class="mdc-select__anchor">
<span class="mdc-select__ripple"></span>
<span class="mdc-select__selected-text"></span>
<span class="mdc-select__dropdown-icon">
<svg class="mdc-select__dropdown-icon-graphic" viewBox="7 10 10 5">
<polygon class="mdc-select__dropdown-icon-inactive" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10">
</polygon>
<polygon class="mdc-select__dropdown-icon-active" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15">
</polygon>
</svg>
</span>
<span class="mdc-floating-label">Cause for Campaign</span>
<span class="mdc-line-ripple"></span>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth">
<ul class="mdc-list">
{% for cause in causes %}
<li class="mdc-list-item" data-value="{{ cause.id }}">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">{{ cause.name }}</span>
</li>
{% endfor %}
</ul>
</div>
</label>

<!-- Amount (in USD) -->
Expand All @@ -99,15 +106,21 @@
<input required type="text" id="managers" name="managers" class="mdc-text-field__input" aria-labelledby="managers">
<span class="mdc-line-ripple"></span>
</label>

<!-- Submit button -->
<button class="mdc-button mdc-button--raised" type="submit">
<span class="mdc-button__ripple"></span>
<i class="material-icons mdc-button__icon" aria-hidden="true"
>check_circle</i
>
<span class="mdc-button__label">Create</span>
</button>

<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="emblem-action-buttons mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<!-- Submit button -->
<button class="mdc-button mdc-button--raised" type="submit">
<span class="mdc-button__ripple"></span>
<div class="mdc-button__label">Create</div>
</button>
<!-- Cancel button -->
<a href="/" class="mdc-button">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Cancel</span>
</a>
</div>
</div>
</form>
</div>
</div>
Expand Down
21 changes: 6 additions & 15 deletions website/templates/donations/new-donation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,26 +101,17 @@
</div>

<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<div class="emblem-donation-buttons mdc-layout-grid__cell mdc-layout-grid__cell--span-4">

<!-- Cancel button -->
<a href="/viewCampaign?campaign_id={{ campaign.id }}" class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<i class="material-icons mdc-button__icon" aria-hidden="true"
>close</i
>
<span class="mdc-button__label">Cancel</span>
</a>

<div class="emblem-action-buttons mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
<!-- Donate button -->
<button class="mdc-button mdc-button--raised" type="submit">
<span class="mdc-button__ripple"></span>
<i class="material-icons mdc-button__icon" aria-hidden="true"
>favorite</i
>
<span class="mdc-button__label">Donate</span>
</button>

<!-- Cancel button -->
<a href="/viewCampaign?campaign_id={{ campaign.id }}" class="mdc-button">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Cancel</span>
</a>
</div>
</div>
</div>
Expand Down
4 changes: 0 additions & 4 deletions website/templates/errors/401.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,4 @@

{% block error_message %}Error 401: Unauthorized{% endblock %}

{% block error_caption %}New app, who dis?{% endblock %}

{% block error_tips %}
If you're logged out, try logging in to the application.
pattishin marked this conversation as resolved.
Show resolved Hide resolved
{% endblock %}
5 changes: 1 addition & 4 deletions website/templates/errors/403.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,5 @@

{% block error_message %}Error 403: Access Denied{% endblock %}

{% block error_caption %}I'm sorry, I'm afraid I can't let you do that.{% endblock %}

{% block error_tips %}
You do not have access to this resource.
{% block error_caption %}You do not have access to this resource.{% endblock %}
{% endblock %}
2 changes: 0 additions & 2 deletions website/templates/errors/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@

{% block error_message %}Error 404: Page Not Found{% endblock %}

{% block error_caption %}I still haven't found what you're looking for{% endblock %}

{% block error_tips %}
Try the following:
<ul>
Expand Down
12 changes: 4 additions & 8 deletions website/templates/errors/500.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,11 @@
{% block title %}Internal Error{% endblock %}

{% block error_message %}Error 500: Internal Server Error{% endblock %}
{% block error_caption %}
If you want to be a good archaeologist, you've got to check the logs.
{% endblock %}

{% block error_tips %}
An unknown error occurred. Details have been forwarded to the application owner.
<br /><br />
If this is your application, here are some steps you can take to diagnose the
issue:

<p>An unknown error occurred. Details have been forwarded to the application owner.</p>
<p>If this is your application, here are some steps you can take to diagnose the issue:</p>

<ul>
<li>
If your application is <b>running locally</b>, application logs are
Expand Down
47 changes: 47 additions & 0 deletions website/templates/errors/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,55 @@
limitations under the License.
-->

<style>
body {
margin: 0;
font-family: 'Google Sans', sans-serif;
}

.emblem-message {
width: 100%;
background-color: #efefef;
color: #606060;
display: block;
padding: 0.75em;
text-align: center;
}

.mdc-top-app-bar,
.mdc-button {
background: #306DFD !important;
Copy link
Contributor

Choose a reason for hiding this comment

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

Ditto - can we avoid !important here?

Copy link
Collaborator Author

@pattishin pattishin May 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

̶T̶h̶i̶s̶ ̶c̶a̶n̶ ̶g̶e̶t̶ ̶r̶e̶m̶o̶v̶e̶d̶ ̶👍🏼
Update: Double-checked. Will need to leave this in for now. The default color for the bar and button is the original purple without adding !important.

Screen Shot 2022-05-06 at 4 31 31 PM

Copy link
Contributor

Choose a reason for hiding this comment

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

As above - keeping !important sounds fine, provided we include a link (via code comments) to a GitHub issue tracking its (eventual) removal.

}

.material-icons {
font-size: 14px;
}

.error-root {
padding: 0.75em;
font-size: 20px;
}

.error-message, .error-caption {
text-align: center;
}

.error-root .error-message {
display: block;
font-weight: bold;
text-align: center;
}

.error-caption {
display: block;
font-style: italic;
padding-top: 0.5em;
text-align: center;
}
</style>
{% extends "base.html" %}


{% block content %}
<div class="error-root">
<p>
Expand Down
Loading