This is an automated email from the ASF dual-hosted git repository.
dklco pushed a commit to branch SLING-7858
in repository
https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
The following commit(s) were added to refs/heads/SLING-7858 by this push:
new 58039fe Supporting at least a resonable login screen, making it look
more 'apache-ish' and fixing the button on the file properties editor
58039fe is described below
commit 58039fe145b279693086e85784c198f9ca17cc9c
Author: Dan Klco <[email protected]>
AuthorDate: Tue Sep 4 11:16:57 2018 -0400
Supporting at least a resonable login screen, making it look more
'apache-ish' and fixing the button on the file properties editor
---
ui/src/main/frontend/gulpfile.js | 4 +-
ui/src/main/frontend/src/scss/_grid.scss | 125 +++++++++++++++++++++
.../src/scss/{bulma.scss => _overrides.scss} | 26 ++++-
ui/src/main/frontend/src/scss/cms.scss | 9 ++
ui/src/main/frontend/src/scss/editor.scss | 1 +
ui/src/main/frontend/src/scss/starter.scss | 122 ++++++++++++++++++++
.../cms/fileeditorinclude/fileeditorinclude.jsp | 2 +-
.../jcr_root/libs/sling-cms/content/start.json | 2 +-
8 files changed, 283 insertions(+), 8 deletions(-)
diff --git a/ui/src/main/frontend/gulpfile.js b/ui/src/main/frontend/gulpfile.js
index 23ba31a..54dcdb9 100755
--- a/ui/src/main/frontend/gulpfile.js
+++ b/ui/src/main/frontend/gulpfile.js
@@ -133,7 +133,7 @@ gulp.task('editor-styles', function() {
gulp.task('cms-styles', function() {
return streamqueue ({objectMode: true},
-
gulp.src(['./src/scss/bulma.scss','./src/scss/cms.scss'])
+ gulp.src('./src/scss/cms.scss')
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(cleanCSS())
@@ -157,7 +157,7 @@ gulp.task('starter-assets', function() {
});
gulp.task('starter-styles', function() {
- return gulp.src('./src/scss/bulma.scss')
+ return gulp.src('./src/scss/starter.scss')
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(cleanCSS())
diff --git a/ui/src/main/frontend/src/scss/_grid.scss
b/ui/src/main/frontend/src/scss/_grid.scss
new file mode 100644
index 0000000..267360e
--- /dev/null
+++ b/ui/src/main/frontend/src/scss/_grid.scss
@@ -0,0 +1,125 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@mixin Cell ($size) {
+ // Specific sizing for cells in 5% increments.
+ .Cell {
+ @for $i from 1 through 20 {
+ &.#{$size}-#{$i*5} {
+ flex: 0 0 #{$i*5}#{'%'};
+ }
+ }
+ }
+}
+
+@mixin Fit ($size) {
+ // Proportionally space cells rather than wrapping
+ &.Fit-#{$size} {
+ >.Cell {
+ -webkit-box-flex: 1;
+ -webkit-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ }
+ }
+}
+
+// Default grid behavior
+.Grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ // Add gutters to a grid
+ &.Gutter {
+ margin: 0 -1rem 0 -1rem;
+
+ >.Cell {
+ padding: 0 1rem 0 1rem;
+ }
+ }
+
+ // Grid Vertical Alignment
+ &.Align-Top {
+ align-items: flex-start;
+ }
+ &.Align-Bottom {
+ align-items: flex-end;
+ }
+ &.Align-Center {
+ align-items: center;
+ }
+
+ // Default cell behavior
+ .Cell {
+ // Cell sizing, full-width by default for responsive
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 100%;
+ -ms-flex: 0 0 100%;
+ flex: 0 0 100%;
+
+ // Per Cell Alignment
+ &.Align-Top {
+ align-self: flex-start;
+ }
+ &.Align-Bottom {
+ align-self: flex-end;
+ }
+ &.Align-Center {
+ align-self: center;
+ }
+ }
+
+ $display-size: "Mobile";
+ @include Fit($display-size);
+ @include Cell($display-size);
+}
+
+// Small devices (Landscape phones, 544px)
+@media (min-width: 34em) {
+ .Grid {
+ $display-size: "Small";
+ @include Fit($display-size);
+ @include Cell($display-size);
+ }
+}
+
+// Medium devices (Tablets, 768px)
+@media (min-width: 48em) {
+ .Grid {
+ $display-size: "Medium";
+ @include Fit($display-size);
+ @include Cell($display-size);
+ }
+}
+
+// Large devices (Desktops, 992px)
+@media (min-width: 62em) {
+ .Grid {
+ $display-size: "Large";
+ @include Cell($display-size);
+ @include Fit($display-size);
+ }
+}
+
+// Extra large devices (Large desktops, 1200px)
+@media (min-width: 75em) {
+ .Grid {
+ $display-size: "Extra";
+ @include Cell($display-size);
+ @include Fit($display-size);
+ }
+}
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/scss/bulma.scss
b/ui/src/main/frontend/src/scss/_overrides.scss
similarity index 70%
rename from ui/src/main/frontend/src/scss/bulma.scss
rename to ui/src/main/frontend/src/scss/_overrides.scss
index 89d68a9..3d718fa 100644
--- a/ui/src/main/frontend/src/scss/bulma.scss
+++ b/ui/src/main/frontend/src/scss/_overrides.scss
@@ -14,10 +14,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+
+
@charset "utf-8";
+
+// Brand Colors
+$indigo: #282661;
+$violet: #662F8F;
+$magenta: #9E2165;
+$crimson: #CB2138;
+$orange: #EA7826;
+$goldenrod: #F79A25;
+$gray: #6D6E71;
+$gray-light: lighten($gray, 50%);
+$red: #D22128;
+
+// Bulma default style overrides
+$family-sans-serif: "Open Sans",sans-serif;
+$link: $indigo;
+$primary: $magenta;
+$warning: $orange;
+$danger: $crimson;
$navbar-height: 5rem;
$navbar-item-img-max-height: 4rem;
-$modal-z: 2000;
-
-@import "../../node_modules/bulma/bulma.sass";
-@import "../../node_modules/datatables-bulma/css/dataTables.bulma.css";
\ No newline at end of file
+$modal-z: 2000;
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/scss/cms.scss
b/ui/src/main/frontend/src/scss/cms.scss
index 8ee6241..c2677ba 100644
--- a/ui/src/main/frontend/src/scss/cms.scss
+++ b/ui/src/main/frontend/src/scss/cms.scss
@@ -18,6 +18,10 @@
*/
@import 'fonts';
+@import 'overrides';
+@import "../../node_modules/bulma/bulma.sass";
+@import "../../node_modules/datatables-bulma/css/dataTables.bulma.css";
+
body.cms {
background: url(../img/gradient.jpg) no-repeat;
background-attachment: fixed;
@@ -89,4 +93,9 @@ table.dataTable thead .sorting_asc:after {
table.dataTable thead .sorting_desc:after {
content: "\e92a"
+}
+
+.table tr.is-selected {
+ background-color: lighten($gray, 50%);
+ color: $grey-darker;
}
\ No newline at end of file
diff --git a/ui/src/main/frontend/src/scss/editor.scss
b/ui/src/main/frontend/src/scss/editor.scss
index 0d1a0d8..90c6eaf 100644
--- a/ui/src/main/frontend/src/scss/editor.scss
+++ b/ui/src/main/frontend/src/scss/editor.scss
@@ -19,6 +19,7 @@
.sling-cms-editor {
@import 'fonts';
+ @import 'overrides';
@import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/elements/button.sass";
diff --git a/ui/src/main/frontend/src/scss/starter.scss
b/ui/src/main/frontend/src/scss/starter.scss
new file mode 100644
index 0000000..105ff9b
--- /dev/null
+++ b/ui/src/main/frontend/src/scss/starter.scss
@@ -0,0 +1,122 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@import 'fonts';
+@import 'grid';
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: 'Open Sans', Helvetica, Arial;
+ font-weight: 300;
+ color: rgb(128,128,128);
+ position: relative;
+ height: 100%;
+}
+
+h1 {
+ font-weight: 300;
+ font-size: 2.4em;
+ color: rgb(96,96,96);
+}
+
+h2 {
+ font-weight: 400;
+ font-size: 2em;
+ color: rgb(96,96,96);
+}
+
+p {
+ line-height: 1.8em;
+}
+
+a {
+ color: rgb(0,103,140);
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ img {
+ border: none;
+ }
+}
+
+.Home-Grid {
+ min-height: 100%;
+
+ .Gradient {
+ flex: 0 0 100%;
+ height: 16px;
+ background: url('../img/gradient.jpg') no-repeat;
+ background-size: cover;
+
+ @media (min-width: 48em) {
+ flex: 0 0 16px;
+ height: auto;
+ }
+ }
+
+ .Logos {
+ padding: 10% 20% 2% 20%;
+
+ @media (min-width: 48em) {
+ padding: 6%;
+ }
+ }
+
+ #sling-logo {
+ display: block;
+ margin-bottom: 32px;
+ margin-right: -8%; // Account for the TM offset
+
+ @media (min-width: 48em) {
+ margin-bottom: 180px;
+ }
+ }
+
+ #asf-logo {
+ display: block;
+ }
+
+ .Main-Content {
+ padding: 0 16px;
+
+ @media (min-width: 48em) {
+ padding: 0 16px 0 0;
+ }
+
+ @media (min-width: 62em) {
+ padding: 0;
+ }
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ line-height: 1.8em;
+ margin-bottom: 1em;
+ }
+
+ #Logout {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git
a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/fileeditorinclude/fileeditorinclude.jsp
b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/fileeditorinclude/fileeditorinclude.jsp
index 1628fb0..1015702 100644
---
a/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/fileeditorinclude/fileeditorinclude.jsp
+++
b/ui/src/main/resources/jcr_root/libs/sling-cms/components/cms/fileeditorinclude/fileeditorinclude.jsp
@@ -43,7 +43,7 @@
</c:otherwise>
</c:choose>
<div class="Field-Group">
- <button type="submit" class="btn btn-success">
+ <button type="submit" class="button is-primary">
<sling:encode value="Save File" mode="HTML" />
</button>
</div>
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/content/start.json
b/ui/src/main/resources/jcr_root/libs/sling-cms/content/start.json
index 06f0d40..2c061fa 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/content/start.json
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/content/start.json
@@ -13,7 +13,7 @@
"richtext": {
"jcr:primaryType": "nt:unstructured",
"sling:resourceType":
"sling-cms/components/general/richtext",
- "text": "<h2>Welcome to the Apache Sling
CMS!<\/h2><p>This is a full-featured Content Management System built using the
Apache Sling Framework! To begin using this framework, select + Site on the
left to add your first website.<\/p>"
+ "text": "<h2>Welcome to the Apache Sling
CMS!<\/h2><p>This is a full-featured Content Management System built using the
Apache Sling Framework! To begin, select Site on the left to add your first
website.<\/p>"
}
},
"nav": {
