From 7d9542f5fc6db3454262a73956e7cb29e1857a0c Mon Sep 17 00:00:00 2001 From: Dennis Eichhorn Date: Fri, 28 Dec 2018 18:33:54 +0100 Subject: [PATCH] playing with variables --- _vars.scss | 57 ++++++++++++++++++++++++++++----- article.scss | 17 +++++++--- clean.scss | 2 +- default.scss | 10 +++--- input.scss | 64 +++++++++++-------------------------- layout.scss | 22 ++++++------- link.scss | 9 ------ list.scss | 48 +++------------------------- pagination.scss | 4 +-- progress.scss | 2 +- section.scss | 33 ++++++------------- size.scss | 36 ++++----------------- table.scss | 34 ++++---------------- tag.scss | 6 ++-- tests/StandardElements.htm | 25 +++++++++++---- tests/app.htm | 28 ++++++++++++++++ tests/load.js | 65 +++++++++++++++++++++++++++++++------- 17 files changed, 229 insertions(+), 233 deletions(-) create mode 100644 tests/app.htm diff --git a/_vars.scss b/_vars.scss index 08faeea..91091b9 100644 --- a/_vars.scss +++ b/_vars.scss @@ -3,18 +3,18 @@ $font-stack: arial, serif; $font-color: #000; $reverse-font-color: #fff; $font-size: 1rem; +$font-size-smaller: 0.9rem; $background-color: #fff; -$background-color: #e7ebf3; $link-color: #fff; $link-decoration: none; $link-hover-color: #fff; $link-hover-decoration: none; -$default-border: $default-border; +$default-border: 1px; $default-border-color: #000; -$default-border-radius: $default-border-radius; +$default-border-radius: 3px; $default-padding: 5px; /* Content Container */ @@ -23,6 +23,7 @@ $content-container-color: $reverse-font-color; /* Content box */ $content-box-background-color: $background-color; +$content-box-border: $default-border; $content-box-border-color: $default-border-color; $content-box-margin: $default-padding; $content-box-padding: $default-padding; @@ -115,12 +116,21 @@ $breadcrumb-border-color: $default-border-color; $breadcrumb-inactive-background: $content-background-color; $breadcrumb-active-background: $content-box-background-color; +/* Input */ +$input-border: $default-border; +$input-border-color: $default-border-color; +$input-invalid-border-color: #b85450; +$input-background: $background-color; +$input-font-size: $font-size; +$input-color: $font-color; +$input-placeholder-color: #cfcfcf; + /* Button */ $button-border: $default-border; $button-border-color: $default-border-color; $button-background: #f1f1f1; $button-active-background: #d6d6d6; -$button-font-size: 0.9rem; +$button-font-size: $font-size-smaller; $button-height: 2rem; $button-min-width: 70px; $button-padding: $default-padding; @@ -139,17 +149,48 @@ $canvas-border-color: $default-border-color; /* Article */ $article-background: $content-box-background-color; $article-padding: $default-padding; +$article-link-color: #8ea4ff; + +$article-table-border: $default-border; +$article-table-border-color: #999; +$article-even-background: #eee; /* Form */ -$form-label-size: 0.9rem; +$form-label-size: $font-size-smaller; /* Icon */ -$icon-font-color: #fff; -$icon-font-size: 0.9rem; +$icon-font-color: $reverse-font-color; +$icon-font-size: $font-size-smaller; /* Img */ $img-padding: $default-padding; $img-border: $default-border; $img-border-color: $default-border-color; $img-background: $content-box-background-color; -$img-border-radius: $default-border-radius; \ No newline at end of file +$img-border-radius: $default-border-radius; + +/* list */ +$list-padding: $default-padding; +$list-background: $background-color; + +$list-border-radius: $default-border-radius; +$list-border: $default-border; +$list-border-color: $default-border-color; + +/* pagination */ +$pagination-border-radius: $default-border-radius; +$pagination-active-color: $reverse-font-color; +$pagination-active-background: #353535; + +/* pre */ +$pre-background: $background-color; +$pre-border-radius: $default-border-radius; +$pre-border: $default-border; +$pre-border-color: $default-border-color; +$pre-padding: $default-padding; + +/* tag */ +$tag-border: $default-border; +$tag-border-color: $default-border-color; +$tag-color: $reverse-font-color; +$tag-font-size: 0.7rem; \ No newline at end of file diff --git a/article.scss b/article.scss index 4b95ffa..550b918 100644 --- a/article.scss +++ b/article.scss @@ -5,6 +5,15 @@ article { padding: $article-padding; margin: 0; + a { + color: $article-link-color; + border-bottom: 1px dotted $article-link-color; + + &:hover { + border-bottom: none; + } + } + p { line-height: 1.5em; } @@ -27,15 +36,15 @@ article { table { border-collapse: collapse; - border: 1px solid #999; + border: $article-table-border solid $article-table-border-color; th, td { padding: 5px; - border: 1px solid #999; + border: $article-table-border solid $article-table-border-color; } tr:nth-child(2n) { - background: #eee; + background: $article-even-background; } } -} +} \ No newline at end of file diff --git a/clean.scss b/clean.scss index 5a88709..a54869b 100644 --- a/clean.scss +++ b/clean.scss @@ -21,7 +21,7 @@ ul { } input, select, textarea, .textarea { - box-sizing: border-box; + @include box-sizing(border-box); appearance: none; box-shadow: none; diff --git a/default.scss b/default.scss index 9e40856..f1691c7 100644 --- a/default.scss +++ b/default.scss @@ -11,14 +11,14 @@ body { } pre { - background: #fff; - @include border-radius(3px); - border: 1px solid $content-border-color; - padding: 5px; + background: $pre-background; + @include border-radius($pre-border-radius); + border: $pre-border solid $pre-border-color; + padding: $pre-padding; overflow-x: scroll; counter-reset: line; width: 100%; - box-sizing: border-box; + @include box-sizing(border-box); span { display: block; diff --git a/input.scss b/input.scss index 90036b8..dd291af 100644 --- a/input.scss +++ b/input.scss @@ -1,7 +1,7 @@ @import "_mixins", "_vars"; input, select, textarea, .textarea { - border: 1px solid $content-border-color; + border: $input-border solid $input-border-color; } progress { @@ -21,16 +21,16 @@ input[type="email"], input[type="date"], input[type="number"], input[type="datetime-local"] { - box-sizing: border-box; - color: #454545; - background: #fff; + @include box-sizing(border-box); + color: $input-color; + background: $input-background; width: 100%; height: 2rem; min-width: 70px; max-width: 100%; padding: 7px; - font-size: 0.9rem; - border: solid 1px #dcdcdc; + font-size: $input-font-size; + border: $input-border solid $input-border-color; transition: background 0.3s, border 0.3s; box-shadow: inset 1px 1px 4px -2px #c5c5c5; @@ -53,17 +53,17 @@ option { } input[type="file"] { - border: solid 1px #dcdcdc; + border: solid $input-font-size $input-background; width: 100%; max-width: 100%; - color: #454545; + color: $input-color; padding: 10px; - box-sizing: border-box; + @include box-sizing(border-box); } input::placeholder { - color: #cfcfcf; - opacity: 1; + color: $input-placeholder-color; + opacity: 0.5; } input::placeholder, textarea { @@ -72,7 +72,7 @@ input::placeholder, textarea { input:invalid { transition: all 0.5s; - border: 1px solid #b85450; + border-color: $input-invalid-border-color; } textarea, .textarea { @@ -118,13 +118,13 @@ input[type="range"] { button { @include box-sizing(border-box); display: inline-block; - background: #fff; + background: $input-background; height: 2rem; - font-size: 1rem; + font-size: $input-font-size; min-width: 40px; - border-left: solid 1px #dcdcdc; - border-top: solid 1px #dcdcdc; - border-bottom: solid 1px #dcdcdc; + border-left: solid $input-font-size $input-background; + border-top: solid $input-font-size $input-background; + border-bottom: solid $input-font-size $input-background; border-right: none; padding: 0; @@ -134,7 +134,7 @@ input[type="range"] { flex-shrink: 0; &:hover { - background: #fff; + background: $input-background; } } @@ -145,7 +145,7 @@ input[type="range"] { input { @include box-sizing(border-box); - font-size: 1em; + font-size: $input-font-size; position: relative; vertical-align: middle; @@ -154,32 +154,6 @@ input[type="range"] { } } -.dropdown { - position: relative; - display: inline-block; - - &:hover .content { - display: block; - } - - .content { - display: none; - position: absolute; - z-index: 2; - background: #fff; - - input { - display: none; - } - - label { - display: block; - margin: 5px; - padding: 5px; - } - } -} - select.plain { width: auto; margin: 0; diff --git a/layout.scss b/layout.scss index 4f4d7bd..ec7d2be 100644 --- a/layout.scss +++ b/layout.scss @@ -1,16 +1,16 @@ @import "color"; .ipt-wrap { - display: table; - box-sizing: border-box; + display: table; + @include box-sizing(border-box); - .ipt-first { - width: 100%; - display: table-cell; - } + .ipt-first { + width: 100%; + display: table-cell; + } - .ipt-second { - padding-left: 5px; - display: table-cell; - } - } \ No newline at end of file + .ipt-second { + padding-left: 5px; + display: table-cell; + } +} \ No newline at end of file diff --git a/link.scss b/link.scss index 71c1936..9186997 100644 --- a/link.scss +++ b/link.scss @@ -1,12 +1,3 @@ -article a { - color: #8ea4ff; - border-bottom: 1px dotted #8ea4ff; - - &:hover { - border-bottom: none; - } -} - .unseen { font-weight: bold; } diff --git a/list.scss b/list.scss index 4f786e0..6aa311b 100644 --- a/list.scss +++ b/list.scss @@ -1,22 +1,10 @@ @import "_mixins", "_vars"; -ul.default li { - margin: 5px 0 5px 0; - - &:first-child { - margin: 0 0 5px 0; - } - - &:last-child { - margin: 5px 0 0 0; - } -} - ul.boxed { - background: #fff; - padding: 5px; - @include border-radius(3px); - border: 1px solid $content-border-color; + background: $list-background; + padding: $list-padding; + @include border-radius($list-border-radius); + border: $list-border solid $list-border-color; li { margin: 5px 0 5px 0; @@ -33,33 +21,5 @@ ul.boxed { ul.h-list li { display: inline-block; - margin: 5px 10px 5px 10px; } - -.bullet-list { - margin: 0; - padding: 0; - border-spacing: 0; - border-collapse: collapse; - - td:first-child { - padding-right: 20px; - } - - span { - margin-right: 5px; - } -} - -.bullet { - width: 7px; - height: 7px; - border-radius: 30px; - background: #ccc; - display: inline-block; - - &.active { - background: #000; - } -} diff --git a/pagination.scss b/pagination.scss index 13e64d8..1f76791 100644 --- a/pagination.scss +++ b/pagination.scss @@ -13,8 +13,8 @@ } .active, a:hover, a:active { - color: #ffffff; - background: #353535; + color: $pagination-active-color; + background: $pagination-active-background; @include box-shadow-out(#e8e8e8); } } diff --git a/progress.scss b/progress.scss index 3c57096..3373b90 100644 --- a/progress.scss +++ b/progress.scss @@ -1,7 +1,7 @@ @import "_mixins", "_vars"; .meter { - height: 20px; /* Can be anything */ + height: 20px; /* Can be anything */ position: relative; background: none !important; diff --git a/section.scss b/section.scss index 45c6ec6..f8038e9 100644 --- a/section.scss +++ b/section.scss @@ -19,31 +19,16 @@ section.box { @include box-shadow-bottom(#f1f1f1); - border: 1px solid $content-border-color; - background: #fff; + border: $content-box-border solid $content-box-border-color; + background: $content-box-background-color; - &.orange { - border-top: 3px solid #FBA026; - } - - &.red { - border-top: 3px solid #B8312F; - } - - &.green { - border-top: 3px solid #41A85F; - } - - &.blue { - border-top: 3px solid #2C82C9; - } - - &.purple { - border-top: 3px solid #553982; - } - - &.darkblue { - border-top: 3px solid #2969B0; + @each $tuple in + 'orange' #FBA026, 'red' #B8312F, 'green' #41A85F, + 'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 { + &.#{nth($tuple, 1)} { + background: #{nth($tuple, 2)}; + border-top: 3px solid #{nth($tuple, 2)}; + } } } diff --git a/size.scss b/size.scss index 2ef76b0..3809454 100644 --- a/size.scss +++ b/size.scss @@ -1,33 +1,9 @@ -.wf-100 { - width: 100%; -} - -.wf-80 { - width: 80%; -} - -.wf-20 { - width: 20%; -} - -.wf-50 { - width: 50%; -} - -.wf-33 { - width: 33.33%; -} - -.wf-25 { - width: 25%; -} - -.wf-75 { - width: 75%; -} - -.wf-66 { - width: 66.66%; +@each $tuple in + 'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%, + 'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% { + .#{nth($tuple, 1)} { + width: #{nth($tuple, 2)}; + } } .spacer { diff --git a/table.scss b/table.scss index 3fd2bae..ebfc69a 100644 --- a/table.scss +++ b/table.scss @@ -19,33 +19,13 @@ table .sort-asc, table .sort-desc { color: #fff; } - &.red { - caption, thead { - background: #B8312F; - } - } - - &.orange { - caption, thead { - background: #FBA026; - } - } - - &.green { - caption, thead { - background: #41A85F; - } - } - - &.blue { - caption, thead { - background: #2C82C9; - } - } - - &.white { - caption, thead { - background: #fff; + @each $tuple in + 'orange' #FBA026, 'red' #B8312F, 'green' #41A85F, 'white' #fff, + 'blue' #2C82C9, 'purple' #553982, 'darkblue' #2969B0, 'purple' #553982 { + &.#{nth($tuple, 1)} { + caption, thead { + background: #{nth($tuple, 2)}; + } } } } diff --git a/tag.scss b/tag.scss index 6ea707b..ecf0c50 100644 --- a/tag.scss +++ b/tag.scss @@ -2,10 +2,10 @@ .tag { cursor: pointer; - border: 1px solid $content-border-color; + border: $tag-border solid $tag-border-color; padding: 5px 10px 5px 10px; - font-size: 0.7rem; - color: #fff; + font-size: $tag-font-size; + color: $tag-color; display: inline-block; line-height: 1rem; } diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm index 5cc15c6..92aa3dd 100644 --- a/tests/StandardElements.htm +++ b/tests/StandardElements.htm @@ -1,6 +1,7 @@ + Style Test @@ -84,7 +85,7 @@ - +
@@ -420,17 +421,27 @@ -
+
- +
-
- +
+ + +
-
- +
+
diff --git a/tests/app.htm b/tests/app.htm new file mode 100644 index 0000000..a925a4e --- /dev/null +++ b/tests/app.htm @@ -0,0 +1,28 @@ + + + + Style Test + + + +
+ +
+ +
+
+
+
+ +
+
+

Title H1

+
+
+
+ + \ No newline at end of file diff --git a/tests/load.js b/tests/load.js index aef06f4..7ff77a4 100644 --- a/tests/load.js +++ b/tests/load.js @@ -42,18 +42,6 @@ jsOMS.Uri.UriFactory.setQuery('/lang', window.location.href.substr(this.request.getBase().length).split('/')[0]); this.uiManager.bind(); - this.setupServiceWorker(); - }; - - setupServiceWorker () - { - /** global: navigator */ - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('/Web/Backend/ServiceWorker.js', {scope: this.request.getBase()}).catch(function (e) - { - jsOMS.Log.Logger.instance.warning('ServiceWorker registration failed.'); - }); - } }; setResponseMessages () @@ -127,4 +115,57 @@ jsOMS.ready(function () /** global: jsOMS */ window.omsApp = new jsOMS.Application(); + + const inputElement = document.getElementById('input1'); + const dataList = inputElement.getElementsByClassName('dropdown')[0].getElementsByTagName('table')[0]; + const dataTpl = inputElement.getElementsByClassName('rowTemplate')[0]; + const src = inputElement.getElementsByClassName('inputClass')[0].getAttribute('data-src'); + + document.getElementById('inputId').addEventListener('keyup', function(e) { + if (typeof src !== 'undefined' && src !== '') { + while (dataList.firstChild) { + dataList.removeChild(dataList.firstChild); + } + + const request = new jsOMS.Message.Request.Request(src); + request.setSuccess(function (data) { + data = JSON.parse(data.response); + const dataLength = data.length; + + console.table(data); + + for(let i = 0; i < dataLength; ++i) { + const newRow = dataTpl.content.cloneNode(true); + const fields = newRow.querySelectorAll('[data-tpl-value]'); + const fieldLength = fields.length; + + for (let j = 0; j < fieldLength; ++j) { + console.log(jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data[i])); + fields[j].appendChild(document.createTextNode(jsOMS.getArray(fields[j].getAttribute('data-tpl-name'), data[i]))); + } + + dataList.appendChild(newRow); + } + }); + request.send(); + } + + // check if data-src is available + // if yes load data with delay of x ms + // if dropdown active + // put data into dropdown + // select highest fit + // with enter/tab the text is completed + // if tags is true + // move selected to tag + // if emptyafter select is true + // remove content from input field + // else + // autocomplete text based on selecteion + // else put directly into input field and/or tag list depending on settings + // if not check drop down for search results/data and do similar tasks as above + // .... reorder ... currently strucuture sux! + + // the dropdown should be a table because the data might be in tables (e.g. first name, second name, address etc. for a result) + }); });