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

New UI main page #98

Merged
merged 24 commits into from
Aug 6, 2020
+1,036 −304
Merged

New UI main page #98

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3754f32
Integrate tailwindcss.
amclain Jul 31, 2020
86bbb76
Move the application css customizations into xebow.scss.
amclain Jul 31, 2020
fc9f304
Bring the UI back up to parity.
amclain Aug 1, 2020
40751a3
Add fontawesome for icons.
amclain Aug 1, 2020
98f1afe
Remove stale html for LiveView telemetry.
amclain Aug 1, 2020
26f90ee
Move boilerplate LiveView scss to dedicated file.
amclain Aug 1, 2020
696c98d
Add lato font.
amclain Aug 2, 2020
28dff68
Create nav bar.
amclain Aug 1, 2020
5324aa3
Lay out configuration controls.
amclain Aug 1, 2020
17a4744
Add key styling.
amclain Aug 1, 2020
d5b0f23
Style sliders.
amclain Aug 2, 2020
81a9840
Remove outline from button and select box.
amclain Aug 2, 2020
c1ddc59
Preliminary dropdown styling.
amclain Aug 2, 2020
9407cf0
Add frame around keypad and enlarge keys.
amclain Aug 2, 2020
9caae94
Refactor dropdown arrow to use CSS content rather than a DOM element.
amclain Aug 2, 2020
2b366ac
Adjust LED size and position in the live component.
amclain Aug 3, 2020
347cf68
Rename xebow.scss to keypad.scss.
amclain Aug 3, 2020
428fbf4
Move nav CSS into HTML template. It's one-off styling.
amclain Aug 3, 2020
e17f0aa
Convert more CSS properties to tailwind utility classes.
amclain Aug 3, 2020
3733b42
Capitalize animation config option names.
amclain Aug 3, 2020
878fc5e
Adjust select box styling.
amclain Aug 3, 2020
b024604
Adjust button styling.
amclain Aug 3, 2020
10cfe9b
Modify option component to format atoms with underscores.
amclain Aug 5, 2020
3c19330
Merge branch 'master' into feature/ui-main-page
vanvoljg Aug 6, 2020
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
128 changes: 15 additions & 113 deletions assets/css/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,120 +1,22 @@
/* This file is for your main application css. */
@import './phoenix.css';
@import '../node_modules/nprogress/nprogress.css';
@import "./fontawesome.scss";
@import "./lato.scss";

/* LiveView specific classes for your customizations */
.invalid-feedback {
color: #a94442;
display: block;
margin: -1rem 0 2rem;
}

.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
display: none;
}

.phx-click-loading {
opacity: 0.5;
transition: opacity 1s ease-out;
}

.phx-disconnected {
cursor: wait;
}
.phx-disconnected * {
pointer-events: none;
}

.phx-modal {
opacity: 1 !important;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}

.phx-modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}

.phx-modal-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Alerts and form errors */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert p {
margin-bottom: 0;
}
.alert:empty {
display: none;
}
@import "../node_modules/nprogress/nprogress.css";

// my styles

.container {
max-width: 120rem;
color: white;
}
@import "./button.scss";
@import "./live_view.scss";
@import "./keypad.scss";
@import "./select.scss";
@import "./slider.scss";

body {
background-color: #222;
}

div.screen {
position: relative;
top: 25px;
left: 25px;
height: 325px;
}

span.key,
span.led {
display: inline-block;
position: absolute;
border: 1px solid #222;
}

span.led {
border-radius: 25px;
@apply text-white font-light bg-gray-900;
@apply mx-8;
font-family: lato, sans-serif;
font-size: 1.375rem;
}
15 changes: 15 additions & 0 deletions assets/css/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
button {
@apply text-lg bg-blue-800 text-white font-normal pt-2 pb-1 px-4 rounded;

.svg-inline--fa {
@apply text-base;
}

&:hover {
@apply bg-blue-600;
}

&:focus {
@apply outline-none;
}
}
11 changes: 11 additions & 0 deletions assets/css/fontawesome.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/*!
* Font Awesome Free 5.14.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("/fonts/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-solid-900.woff") format("woff");
}
32 changes: 32 additions & 0 deletions assets/css/keypad.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.keypad {
@apply relative;

.frame {
@apply relative;
@apply border border-gray-700 border-solid;
border-radius: .625rem;
width: 250px;
height: 320px;
top: -53px;
left: -53px;
}
}

.key,
.led {
display: inline-block;
position: absolute;
}

.key {
border-radius: 6px;
box-shadow: inset 0 -1px 0 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);

padding-top: 6px;
}

.led {
border-radius: 25px;
}
179 changes: 179 additions & 0 deletions assets/css/lato.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
/*!
Lato font.
Copy link
Member Author

Choose a reason for hiding this comment

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

I copied in the entire lato.scss file, made the necessary changes for this project, and commented out the fonts we aren't using. As much as I try to avoid committing commented code, this should be at low-risk of changing and sets the next developer up to only have to uncomment the code if we add another lato font to the project (like italics).

Copy link
Member

Choose a reason for hiding this comment

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

I'm pretty okay with it. There's not a lack of space in these devices, so this is fine.

*/
/* Lato (hairline, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 100;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-hairline.woff2") format("woff2"), url("/fonts/lato-hairline.woff") format("woff");
}
*/
/* Lato (hairline, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 100;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-hairline-italic.woff2") format("woff2"), url("/fonts/lato-hairline-italic.woff") format("woff");
}
*/
/* Lato (thin, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 200;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-thin.woff2") format("woff2"), url("/fonts/lato-thin.woff") format("woff");
}
*/
/* Lato (thin, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 200;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-thin-italic.woff2") format("woff2"), url("/fonts/lato-thin-italic.woff") format("woff");
}
*/
/* Lato (light, regular) */
@font-face {
font-family: Lato;
font-weight: 300;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-light.woff2") format("woff2"), url("/fonts/lato-light.woff") format("woff");
}
/* Lato (light, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 300;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-light-italic.woff2") format("woff2"), url("/fonts/lato-light-italic.woff") format("woff");
}
*/
/* Lato (normal, regular) */
@font-face {
font-family: Lato;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-normal.woff2") format("woff2"), url("/fonts/lato-normal.woff") format("woff");
}
/* Lato (normal, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 400;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-normal-italic.woff2") format("woff2"), url("/fonts/lato-normal-italic.woff") format("woff");
}
*/
/* Lato (medium, regular) */
/*
@font-face {
font-family: "Lato Medium";
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-medium.woff2") format("woff2"), url("/fonts/lato-medium.woff") format("woff");
}
*/
/* Lato (medium, italic) */
/*
@font-face {
font-family: "Lato Medium";
font-weight: 400;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-medium-italic.woff2") format("woff2"), url("/fonts/lato-medium-italic.woff") format("woff");
}
*/
/* Lato (semibold, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 500;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-semibold.woff2") format("woff2"), url("/fonts/lato-semibold.woff") format("woff");
}
*/
/* Lato (semibold, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 500;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-semibold-italic.woff2") format("woff2"), url("/fonts/lato-semibold-italic.woff") format("woff");
}
*/
/* Lato (bold, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 600;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-bold.woff2") format("woff2"), url("/fonts/lato-bold.woff") format("woff");
}
*/
/* Lato (bold, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 600;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-bold-italic.woff2") format("woff2"), url("/fonts/lato-bold-italic.woff") format("woff");
}
*/
/* Lato (heavy, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 800;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-heavy.woff2") format("woff2"), url("/fonts/lato-heavy.woff") format("woff");
}
*/
/* Lato (heavy, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 800;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-heavy-italic.woff2") format("woff2"), url("/fonts/lato-heavy-italic.woff") format("woff");
}
*/
/* Lato (black, regular) */
/*
@font-face {
font-family: Lato;
font-weight: 900;
font-style: normal;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-black.woff2") format("woff2"), url("/fonts/lato-black.woff") format("woff");
}
*/
/* Lato (black, italic) */
/*
@font-face {
font-family: Lato;
font-weight: 900;
font-style: italic;
text-rendering: optimizeLegibility;
src: url("/fonts/lato-black-italic.woff2") format("woff2"), url("/fonts/lato-black-italic.woff") format("woff");
}
*/
Loading