Merge lp:~deadlight/canonical-identity-provider/sass-tooling into lp:canonical-identity-provider/release

Proposed by Karl Williams on 2019-10-22
Status: Merged
Approved by: Daniel Manrique on 2019-10-22
Approved revision: 1701
Merge reported by: Otto Co-Pilot
Merged at revision: not available
Proposed branch: lp:~deadlight/canonical-identity-provider/sass-tooling
Merge into: lp:canonical-identity-provider/release
Diff against target: 179 lines (+143/-4)
4 files modified
README (+4/-3)
package.json (+2/-1)
scripts/build_vanilla.py (+51/-0)
src/identityprovider/static_src/scss/styles.scss (+86/-0)
To merge this branch: bzr merge lp:~deadlight/canonical-identity-provider/sass-tooling
Reviewer Review Type Date Requested Status
Daniel Manrique 2019-10-22 Approve on 2019-10-22
Review via email: mp+374527@code.launchpad.net

Commit message

Added libsass as a dependency and Vanilla Framework as an NPM dependency.

Added a python script to generate css from the scss.

Description of the change

Added libsass as a dependency and Vanilla Framework as an NPM dependency.

Added a python script to generate css from the scss.

The are no visible changes from this branch, it's tooling to support future changes.

QA instructions:
$ make bootstrap
$ npm install
$ npm install -g gulp
$ gulp
$ python ./scripts/build_vanilla.py
$ cat src/identityprovider/static/vanilla-css/styles.css

If the file has CSS content then the script has successfully built the project's CSS from SCSS.

To post a comment you must log in.
Daniel Manrique (roadmr) wrote :

Looks good, some suggestions for build_vanilla.py (formatting, path handling, file writing changes, some simplifications).

review: Approve
Karl Williams (deadlight) wrote :

I've addressed the comments on the python script

Daniel Manrique (roadmr) wrote :

Looks OK! thanks!

review: Approve
Daniel Manrique (roadmr) wrote :

Here's what the linter said:

16:12:02 O: scripts/build_vanilla.py:6:74: E261 at least two spaces before inline comment
16:12:02 O: scripts/build_vanilla.py:6:80: E501 line too long (111 > 79 characters)
16:12:02 O: scripts/build_vanilla.py:9:13: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:9:15: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:9:80: E501 line too long (93 > 79 characters)
16:12:02 O: scripts/build_vanilla.py:10:17: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:10:19: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:11:18: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:11:20: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:11:80: E501 line too long (131 > 79 characters)
16:12:02 O: scripts/build_vanilla.py:12:20: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:12:22: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:13:24: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:13:26: E251 unexpected spaces around keyword / parameter equals
16:12:02 O: scripts/build_vanilla.py:13:80: E501 line too long (110 > 79 characters)
16:12:02 O: scripts/build_vanilla.py:16:80: E501 line too long (122 > 79 characters)
16:12:02 O: scripts/build_vanilla.py:19:80: E501 line too long (126 > 79 characters)

You can apply the suggested changes and run "make lint" until it's happy, then let me know so we can reapprove this.

1701. By Karl Williams on 2019-10-22

Reformat vanilla build script

Karl Williams (deadlight) wrote :

Ok, that should be some pretty Python now

Daniel Manrique (roadmr) wrote :

+1, thanks!a

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'README'
2--- README 2019-08-30 16:18:32 +0000
3+++ README 2019-10-22 16:57:38 +0000
4@@ -188,9 +188,10 @@
5
6 ::
7
8- $ npm install
9- $ npm install -g gulp
10- $ gulp
11+ $ npm install
12+ $ npm install -g gulp
13+ $ gulp
14+ $ python ./scripts/build_vanilla.py
15
16 Will start a watcher to lint, minify and concat CSS (see ./gulpfile.js)
17 CSS source can be found in src/identityprovider/static/src/css and is built
18
19=== modified file 'package.json'
20--- package.json 2018-12-13 16:31:16 +0000
21+++ package.json 2019-10-22 16:57:38 +0000
22@@ -6,6 +6,7 @@
23 "gulp-concat": "~2.3.4",
24 "gulp-csslint": "~0.1.5",
25 "gulp-csso": "~0.2.9",
26- "gulp-autoprefixer": "0.0.8"
27+ "gulp-autoprefixer": "0.0.8",
28+ "vanilla-framework": "2.2.0"
29 }
30 }
31
32=== added file 'scripts/build_vanilla.py'
33--- scripts/build_vanilla.py 1970-01-01 00:00:00 +0000
34+++ scripts/build_vanilla.py 2019-10-22 16:57:38 +0000
35@@ -0,0 +1,51 @@
36+import io
37+import os
38+
39+import sass
40+
41+# Up one level from scripts directory
42+project_dir = os.path.dirname(
43+ os.path.dirname(os.path.abspath(__file__))
44+)
45+app_path = "src/identityprovider/"
46+
47+compiled = sass.compile(
48+ filename=os.path.join(
49+ project_dir, app_path, "static_src/scss/styles.scss"
50+ ),
51+ output_style="compressed",
52+ include_paths=[
53+ os.path.join(project_dir, "node_modules"),
54+ os.path.join(
55+ project_dir, app_path, "static_src/scss"
56+ ),
57+ ],
58+ source_comments=False,
59+ source_map_filename=os.path.join(
60+ project_dir,
61+ app_path,
62+ "static/vanilla-css/styles.map.css",
63+ ),
64+)
65+
66+with io.open(
67+ os.path.join(
68+ project_dir,
69+ app_path,
70+ "static/vanilla-css/styles.css",
71+ ),
72+ "w",
73+ encoding="utf-8",
74+) as f:
75+ f.write(compiled[0])
76+
77+with io.open(
78+ os.path.join(
79+ project_dir,
80+ app_path,
81+ "static/vanilla-css/styles.map.css",
82+ ),
83+ "w",
84+ encoding="utf-8",
85+) as f:
86+ f.write(compiled[1])
87
88=== added directory 'src/identityprovider/static/vanilla-css'
89=== added directory 'src/identityprovider/static_src/scss'
90=== added file 'src/identityprovider/static_src/scss/styles.scss'
91--- src/identityprovider/static_src/scss/styles.scss 1970-01-01 00:00:00 +0000
92+++ src/identityprovider/static_src/scss/styles.scss 2019-10-22 16:57:38 +0000
93@@ -0,0 +1,86 @@
94+@charset "UTF-8";
95+
96+$color-navigation-background: #363636;
97+$breakpoint-navigation-threshold: 1px;
98+
99+@import 'vanilla-framework/scss/build';
100+
101+//Navigation spacing tweaks
102+.p-navigation .row {
103+ justify-content: space-between;
104+}
105+
106+.p-navigation__nav {
107+ width: auto;
108+}
109+
110+//Standard gradient hero
111+.p-cip-hero {
112+ background-image: linear-gradient(212deg, #E95420 0%, #C44631 6%, #A33940 12%, #8B304A 18%, #7C2B51 24%, #772953 29%, #55163B 51%, #370626 75%, #2C001E 100%);
113+}
114+
115+// Login/register headers hide/show
116+.selected-create {
117+ .login-form, .login-title {
118+ display: none;
119+ }
120+}
121+
122+.selected-login {
123+ .create-form, .create-title {
124+ display: none;
125+ }
126+}
127+
128+//Side navigation for logged in users
129+.p-sidebar {
130+ @media only screen and (max-width: $breakpoint-medium) {
131+ padding: 0 $sph-inner--small;
132+ border-bottom: 1px solid $color-mid-light;
133+ }
134+
135+ @media only screen and (min-width: $breakpoint-medium + 1) {
136+ border-right: 1px solid $color-mid-light;
137+ }
138+
139+ .is-active {
140+ position: relative;
141+
142+ &::before {
143+ background-color: $color-mid-light;
144+ bottom: 0;
145+ content: '';
146+ left: -$sph-inner;
147+ position: absolute;
148+ top: 0;
149+ width: $bar-thickness;
150+ }
151+ }
152+}
153+
154+// Fix for mixed buttons
155+@media only screen and (min-width: $breakpoint-x-small + 1) {
156+ button[class^="p-button"] + a[class^="p-button"],
157+ a[class^="p-button"] + button[class^="p-button"] {
158+ margin-left: $sph-inner;
159+ }
160+}
161+
162+// Custom truncated table cells
163+.p-table__item--truncate {
164+ text-overflow: ellipsis;
165+ overflow: hidden;
166+ white-space: nowrap;
167+}
168+
169+// Custom table style
170+.p-table--bordered {
171+ border-top: 1px solid $color-mid-light;
172+ border-bottom: 1px solid $color-mid-light;
173+}
174+
175+// Custom table-of-contents override
176+.p-table-of-contents {
177+ font-size: 1rem;
178+}
179+