Merge pull request 'feat/18-add-bulma-branding' (#19) from feat/18-add-bulma-branding into main
Reviewed-on: #19
This commit is contained in:
commit
834807a3ad
2
.gitignore
vendored
2
.gitignore
vendored
@ -15,3 +15,5 @@ venv/
|
|||||||
|
|
||||||
# Secrets
|
# Secrets
|
||||||
*.secret
|
*.secret
|
||||||
|
|
||||||
|
priceybot2/node_modules
|
||||||
12
README.md
12
README.md
@ -6,3 +6,15 @@ Set the ENV variable `GOOGLE_APPLICATION_CREDENTIALS` to the location of the goo
|
|||||||
|
|
||||||
|
|
||||||
Run the python script
|
Run the python script
|
||||||
|
|
||||||
|
## compiling sass
|
||||||
|
cd into priceybot2 subfolder
|
||||||
|
|
||||||
|
````
|
||||||
|
npn run dev
|
||||||
|
npm run css-build
|
||||||
|
````
|
||||||
|
Or if you're working on it
|
||||||
|
````
|
||||||
|
npm start
|
||||||
|
````
|
||||||
4198
priceybot2/package-lock.json
generated
Normal file
4198
priceybot2/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
15
priceybot2/package.json
Normal file
15
priceybot2/package.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"name": "mybulma",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "sass/mystyles.scss",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"bulma": "^0.9.4",
|
||||||
|
"node-sass": "^8.0.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"css-build": "node-sass --omit-source-map-url sass/main.scss static/css/main.css",
|
||||||
|
"css-watch": "npm run css-build -- --watch",
|
||||||
|
"start": "npm run css-watch"
|
||||||
|
}
|
||||||
|
}
|
||||||
70
priceybot2/sass/branding.scss
Normal file
70
priceybot2/sass/branding.scss
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
//brand colors
|
||||||
|
$nexi-white: #f8fafb; // Made up
|
||||||
|
$nexi-lighter-black: #353535; // Made up
|
||||||
|
$nexi-black: #181818;
|
||||||
|
$nexi-lighter-red: #9d7c7b; // Made up
|
||||||
|
$nexi-red: #EB312E;
|
||||||
|
$nexi-darker-red: #EB302D; // Made up
|
||||||
|
$nexi-grey: #E4E4E4;
|
||||||
|
$nexi-darker-grey: #D2D2D2;
|
||||||
|
$nexi-green: #36EA7B;
|
||||||
|
$nexi-cyan: #36E9EA;
|
||||||
|
$nexi-purple: #A625EA;
|
||||||
|
$nexi-orange: #F17C25;
|
||||||
|
$nexi-darker-orange: #F44336;
|
||||||
|
$nexi-yellow: #FFC107;
|
||||||
|
|
||||||
|
$custom-colors:
|
||||||
|
(
|
||||||
|
"nexi-white": ($nexi-white, findColorInvert($nexi-white)),
|
||||||
|
"nexi-lighter-black": ($nexi-lighter-black, findColorInvert($nexi-lighter-black)),
|
||||||
|
"nexi-black": ($nexi-black, findColorInvert($nexi-black)),
|
||||||
|
"nexi-lighter-red": ($nexi-lighter-red, findColorInvert($nexi-lighter-red)),
|
||||||
|
"nexi-red": ($nexi-red, findColorInvert($nexi-red)),
|
||||||
|
"nexi-darker-red": ($nexi-darker-red, findColorInvert($nexi-darker-red)),
|
||||||
|
"nexi-grey": ($nexi-grey, findColorInvert($nexi-grey)),
|
||||||
|
"nexi-darker-grey": ($nexi-darker-grey, findColorInvert($nexi-darker-grey)),
|
||||||
|
"nexi-green": ($nexi-green, findColorInvert($nexi-green)),
|
||||||
|
"nexi-cyan": ($nexi-cyan, findColorInvert($nexi-cyan)),
|
||||||
|
"nexi-purple": ($nexi-purple, findColorInvert($nexi-purple)),
|
||||||
|
"nexi-orange": ($nexi-orange, findColorInvert($nexi-orange)),
|
||||||
|
"nexi-darker-orange": ($nexi-darker-orange, findColorInvert($nexi-darker-orange)),
|
||||||
|
"nexi-yellow": ($nexi-yellow, findColorInvert($nexi-yellow)),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Used for texts etc.
|
||||||
|
$grey: $nexi-lighter-black;
|
||||||
|
$grey-dark: $nexi-black;
|
||||||
|
|
||||||
|
// https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass
|
||||||
|
$orange: $nexi-orange;
|
||||||
|
$yellow: $nexi-yellow;
|
||||||
|
$green: $nexi-green;
|
||||||
|
//$turquoise: hsl(171, 100%, 41%) !default
|
||||||
|
$cyan: $nexi-cyan;
|
||||||
|
//$blue: hsl(229, 53%, 53%) !default
|
||||||
|
$purple: $nexi-purple;
|
||||||
|
$red: $nexi-red;
|
||||||
|
|
||||||
|
// https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass
|
||||||
|
$primary: $nexi-white;
|
||||||
|
|
||||||
|
//$info: $cyan;
|
||||||
|
//$success: $green;
|
||||||
|
//$warning: $yellow;
|
||||||
|
//$danger: $red;
|
||||||
|
|
||||||
|
$border: $nexi-darker-grey;
|
||||||
|
$border-hover: $nexi-darker-red;
|
||||||
|
$border-light: $nexi-lighter-red;
|
||||||
|
$border-light-hover: $nexi-grey;
|
||||||
|
|
||||||
|
$link: $nexi-red;
|
||||||
|
//$link-hover: $grey-darker !default
|
||||||
|
//$link-hover-border: $grey-light !default
|
||||||
|
|
||||||
|
//$link-focus: $grey-darker !default
|
||||||
|
$link-focus-border: $nexi-darker-red;
|
||||||
|
|
||||||
|
//$link-active: $grey-darker !default
|
||||||
|
//$link-active-border: $grey-dark !default
|
||||||
7
priceybot2/sass/main.scss
Normal file
7
priceybot2/sass/main.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
// Our scss files
|
||||||
|
@import "branding";
|
||||||
|
|
||||||
|
// Import after our branding so colors work.
|
||||||
|
@import "../node_modules/bulma/bulma.sass";
|
||||||
11601
priceybot2/static/css/main.css
Normal file
11601
priceybot2/static/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html class="is-clipped">
|
<html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Flask Auth Example</title>
|
<title>Flask Auth Example</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -11,7 +11,7 @@ Copyright 2017 Google Inc.
|
|||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
-->
|
-->
|
||||||
<html>
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Hangouts Chat Bot sample</title>
|
<title>Hangouts Chat Bot sample</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@ -14,13 +14,17 @@
|
|||||||
<form method="POST" action="{{ url_for('auth.login') }}">
|
<form method="POST" action="{{ url_for('auth.login') }}">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
|
<label>
|
||||||
|
<input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="password" name="password" placeholder="Your Password">
|
<label>
|
||||||
|
<input class="input is-large" type="password" name="password" placeholder="Your Password">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
@ -29,7 +33,7 @@
|
|||||||
Remember me
|
Remember me
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button class="button is-block is-info is-large is-fullwidth">Login</button>
|
<button class="button is-block is-nexi-red is-dark is-large is-fullwidth ">Login</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -14,28 +14,36 @@
|
|||||||
<form method="POST" action="{{ url_for('auth.signup') }}">
|
<form method="POST" action="{{ url_for('auth.signup') }}">
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
|
<label>
|
||||||
|
<input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
|
<label>
|
||||||
|
<input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="password" name="password" placeholder="Password">
|
<label>
|
||||||
|
<input class="input is-large" type="password" name="password" placeholder="Password">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<input class="input is-large" type="text" name="google_id" placeholder="Google ID">
|
<label>
|
||||||
|
<input class="input is-large" type="text" name="google_id" placeholder="Google ID">
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
|
<button class="button is-block is-nexi-red is-dark is-large is-fullwidth">Sign Up</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user