Browse Source

Styling website with Materialize CSS

master
Mobius K 3 years ago
parent
commit
fef7eef2d6
  1. 5
      package-lock.json
  2. 4
      package.json
  3. 25
      src/routes/index.pug
  4. 9
      src/scripts/index.js
  5. 39
      src/styles/_material.scss
  6. 13
      src/styles/_variables.scss
  7. 21
      src/styles/_wrapper.scss
  8. 31
      src/styles/index.scss
  9. 17
      src/templates/layout.pug
  10. 10
      src/templates/major-device.pug
  11. 10
      src/templates/major-service.pug
  12. 12
      src/templates/minor-device.pug

5
package-lock.json

@ -6987,6 +6987,11 @@
}
}
},
"materialize-css": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/materialize-css/-/materialize-css-1.0.0.tgz",
"integrity": "sha512-4/oecXl8y/1i8RDZvyvwAICyqwNoKU4or5uf8uoAd74k76KzZ0Llym4zhJ5lLNUskcqjO0AuMcvNyDkpz8Z6zw=="
},
"math-random": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",

4
package.json

@ -7,7 +7,9 @@
"start": "gulp",
"build": "gulp build"
},
"dependencies": {},
"dependencies": {
"materialize-css": "^1.0.0"
},
"devDependencies": {
"browser-sync": "^2.26.3",
"firebase-tools": "^6.4.0",

25
src/routes/index.pug

@ -2,21 +2,20 @@ extends ../templates/layout
block content
h1
label(for="bluetoothClass", i18n="bluetoothClass")
input(type="text", disabled, id="bluetoothClass")
button(type="button", i18n="copy", onclick="copyBluetoothClassField()")
p Human readable class
h1(i18n="bluetoothClass")
hr
form
h2(i18n="majorService")
include ../templates/major-service
.row.center-align
.input-field.col.s4.offset-s4
input#bluetoothClass.text-center(type="text", readonly, onclick="copyBluetoothClassField()")
span.helper-text(i18n="clickToCopy")
h3(i18n="majorDevice")
include ../templates/major-device
h2(i18n="majorService")
include ../templates/major-service
h4(i18n="minorDevice")
include ../templates/minor-device
h3(i18n="majorDevice")
include ../templates/major-device
hr
h4(i18n="minorDevice")
include ../templates/minor-device

9
src/scripts/index.js

@ -1,3 +1,12 @@
// Materialize CSS
//=require ../../node_modules/materialize-css/js/cash.js
//=require ../../node_modules/materialize-css/js/global.js
//=require ../../node_modules/materialize-css/js/component.js
//=require ../../node_modules/materialize-css/js/anime.min.js
//=require ../../node_modules/materialize-css/js/buttons.js
//=require ../../node_modules/materialize-css/js/forms.js
//=require ../../node_modules/materialize-css/js/waves.js
// Project scripts
//=require bluetooth.js
//=require i18n.js

39
src/styles/_material.scss

@ -0,0 +1,39 @@
// Color
@import "../../node_modules/materialize-css/sass/components/color-variables";
// @import "../../node_modules/materialize-css/sass/components/color-classes";
// Variables
@import "../../node_modules/materialize-css/sass/components/variables";
// Reset
@import "../../node_modules/materialize-css/sass/components/normalize";
// Components
@import "../../node_modules/materialize-css/sass/components/global";
// @import "../../node_modules/materialize-css/sass/components/badges";
// @import "../../node_modules/materialize-css/sass/components/icons-material-design";
@import "../../node_modules/materialize-css/sass/components/grid";
// @import "../../node_modules/materialize-css/sass/components/navbar";
@import "../../node_modules/materialize-css/sass/components/typography";
// @import "../../node_modules/materialize-css/sass/components/transitions";
// @import "../../node_modules/materialize-css/sass/components/cards";
// @import "../../node_modules/materialize-css/sass/components/toast";
// @import "../../node_modules/materialize-css/sass/components/tabs";
// @import "../../node_modules/materialize-css/sass/components/tooltip";
@import "../../node_modules/materialize-css/sass/components/buttons";
// @import "../../node_modules/materialize-css/sass/components/dropdown";
@import "../../node_modules/materialize-css/sass/components/waves";
// @import "../../node_modules/materialize-css/sass/components/modal";
// @import "../../node_modules/materialize-css/sass/components/collapsible";
// @import "../../node_modules/materialize-css/sass/components/chips";
// @import "../../node_modules/materialize-css/sass/components/materialbox";
@import "../../node_modules/materialize-css/sass/components/forms/forms";
// @import "../../node_modules/materialize-css/sass/components/table_of_contents";
// @import "../../node_modules/materialize-css/sass/components/sidenav";
// @import "../../node_modules/materialize-css/sass/components/preloader";
// @import "../../node_modules/materialize-css/sass/components/slider";
// @import "../../node_modules/materialize-css/sass/components/carousel";
// @import "../../node_modules/materialize-css/sass/components/tapTarget";
// @import "../../node_modules/materialize-css/sass/components/pulse";
// @import "../../node_modules/materialize-css/sass/components/datepicker";
// @import "../../node_modules/materialize-css/sass/components/timepicker";

13
src/styles/_variables.scss

@ -0,0 +1,13 @@
// Bluetooth blue: #3B5998
// Darker blue: #14306B
// Paletton: http://paletton.com/#uid=23K0u0klOszcgHQhAwKqLpHt8k9
$primary-color: #3B5998;
$secondary-color: #14306B;
$h1-fontsize: 1.90rem;
$h2-fontsize: 1.78rem;
$h3-fontsize: 1.46rem;
$h4-fontsize: 1.30rem;
$h5-fontsize: 1.15rem;
$h6-fontsize: 1.00rem;

21
src/styles/_wrapper.scss

@ -0,0 +1,21 @@
// Pushing footer to bottom of page
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
// Off-white background colors
body {
background-color: whitesmoke;
}
// Content breathing room
footer {
margin: 20px 0;
}

31
src/styles/index.scss

@ -1,3 +1,34 @@
// Global variables
@import "variables";
// Material framework
@import "material";
// Content wrap styles
@import "wrapper";
// Give anchors and top level headers our branding color
a, h1 {
color: $primary-color;
}
// Our input text fields are all either readonly
input[type='text'] {
cursor: default;
}
// Self-explanatory
.text-center {
text-align: center;
}
// Hide fields as necessary
.hidden {
display: none;
}
// Make our checkbox labels all the same width, and a more readable color
label span {
color: rgba(0,0,0,0.72);
min-width: 150px;
}

17
src/templates/layout.pug

@ -12,22 +12,17 @@ html(lang="en")
link(rel="stylesheet", href="/index.css")
body
body.container
header
noscript This application requires JavaScript to run!
noscript This application requires JavaScript to run!
main
main.text-center
block content
footer
footer.center-align
div
button#enI18nButton(
onclick="languageChange('en')"
) English
button#esI18nButton(
onclick="languageChange('es')"
) Español
button#enI18nButton.btn-flat.waves-effect.waves-light(onclick="languageChange('en')") English
button#esI18nButton.btn-flat.waves-effect.waves-light(onclick="languageChange('es')") Español
h5
span(i18n="builtBy")
a(href="https://mobiusk.com") MobiusK

10
src/templates/major-device.pug

@ -12,7 +12,9 @@
"Miscellaneous": 0x0000,
}
each value, key in majorDevices
label(for="majorDevice" + key)
span(i18n="majorDevice" + key)
input(type="radio", name="majorDevice", id="majorDevice" + key, value=value)
.row
each value, key in majorDevices
.col.s12.m6.l4
label(for="majorDevice" + key)
input.with-gap(type="radio", name="majorDevice", id="majorDevice" + key, value=value)
span(i18n="majorDevice" + key)

10
src/templates/major-service.pug

@ -11,7 +11,9 @@
"LimitedDiscovery": 0x002000,
}
each value, key in majorServices
label(for="majorService" + key)
span(i18n="majorService" + key)
input(type="checkbox", id="majorService" + key, value=value)
.row
each value, key in majorServices
.col.s12.m6.l4
label(for="majorService" + key)
input(type="checkbox", id="majorService" + key, value=value)
span(i18n="majorService" + key)

12
src/templates/minor-device.pug

@ -85,10 +85,14 @@
.minor-devices
each devices, groupKey in minorDevices
div(class=groupKey)
.row(class=groupKey)
- groupKey = "minorDevice" + groupKey
each value, key in devices
- key = groupKey + key
label(for=key)
span(i18n=key)
input(type="radio", name=groupKey, id=key, value=value)
.col.s12.m6.l4
label(for=key)
input.with-gap(type="radio", name=groupKey, id=key, value=value)
span(i18n=key)
else
.col.s12
p(i18n="minorDeviceNone")

Loading…
Cancel
Save