diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/createpoll.scss | 4 | ||||
| -rw-r--r-- | css/list.css | 25 | ||||
| -rw-r--r-- | css/list.scss | 11 | ||||
| -rw-r--r-- | css/main.css | 28 | ||||
| -rw-r--r-- | css/main.scss | 30 | ||||
| -rw-r--r-- | css/vendor/jquery.datetimepicker.min.css | 1 | ||||
| -rw-r--r-- | css/vote.css | 202 | ||||
| -rw-r--r-- | css/vote.scss | 52 |
8 files changed, 306 insertions, 47 deletions
diff --git a/css/createpoll.scss b/css/createpoll.scss index 3244ff9f..ccc2ef7d 100644 --- a/css/createpoll.scss +++ b/css/createpoll.scss @@ -88,3 +88,7 @@ table .icon-checkmark { #expiration { max-width: 200px; } + +#pollDesc { + width: 100%; +} diff --git a/css/list.css b/css/list.css index a37c266c..deae882a 100644 --- a/css/list.css +++ b/css/list.css @@ -1,4 +1,7 @@ -.row { +.table { + width: 100%; } + +.table-row { display: flex; width: 100%; padding-left: 15px; @@ -8,26 +11,26 @@ background-color: #fff; min-height: 4em; border-bottom: 1px solid #eee; } - .row.table-header .name, .row.table-header .description { + .table-row.table-header .name, .table-row.table-header .description { padding-left: 52px; } - .row.table-header .owner { + .table-row.table-header .owner { padding-left: 6px; } - .row.table-body:hover, .row.table-body:focus, .row.table-body:active, .row.table-body.mouseOver { + .table-row.table-body:hover, .table-row.table-body:focus, .table-row.table-body:active, .table-row.table-body.mouseOver { transition: background-color 0.3s ease; background-color: #f8f8f8; } - .row.table-body .column.owner { + .table-row.table-body .flex-column.owner { display: flex; } - .row.table-body .column.owner .avatardiv { + .table-row.table-body .flex-column.owner .avatardiv { margin-right: 4px; } - .row.table-body .icon-more { + .table-row.table-body .icon-more { right: 14px; opacity: 0.3; cursor: pointer; height: 44px; width: 44px; } - .row.table-body .symbol { + .table-row.table-body .symbol { padding: 2px; } - .row.table-header { + .table-row.table-header { color: #999; } .wrapper { @@ -35,7 +38,7 @@ align-items: center; position: relative; } -.column { +.flex-column { padding: 0 4px; overflow: hidden; white-space: nowrap; @@ -122,7 +125,7 @@ .expiry, .participants { width: 120px; } } @media all and (max-width: 668px) { - .row { + .table-row { padding: 0; } .group-2-1 { diff --git a/css/list.scss b/css/list.scss index 0c6a30ef..3a72efd1 100644 --- a/css/list.scss +++ b/css/list.scss @@ -29,7 +29,10 @@ $mediabreak-1: ($group-1-width + $owner-width + $access-width + $date-width + $d $mediabreak-2: ($group-1-width + $group-2-width + $row-padding * 2); $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2-width) + $row-padding *2 ; -.row { +.table { + width: 100%; +} +.table-row { display: flex; width: 100%; padding-left: $row-padding; @@ -55,7 +58,7 @@ $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2- transition: background-color 0.3s ease; background-color: #f8f8f8; } - .column.owner { + .flex-column.owner { display: flex; .avatardiv { margin-right: 4px; @@ -89,7 +92,7 @@ $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2- } -.column { +.flex-column { padding: 0 $table-padding; overflow: hidden; white-space: nowrap; @@ -215,7 +218,7 @@ $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2- } @media all and (max-width: ($mediabreak-2) ) { - .row { + .table-row { padding: 0; } diff --git a/css/main.css b/css/main.css index d818cd3e..7d77faba 100644 --- a/css/main.css +++ b/css/main.css @@ -5,11 +5,20 @@ h1 { #app header { padding-top: 44px; } +<<<<<<< HEAD +======= +/* allow horizontal scrollbar + otherwise user management is not usable on mobile */ +@media only screen and (max-width: 768px) { + #app-content { + overflow-x: auto !important; } } +>>>>>>> master #app-content-wrapper { flex-direction: column; } .icon-polls { background-color: black; +<<<<<<< HEAD mask: url("../img/polls.svg") no-repeat 50% 50%; } #controls { @@ -20,6 +29,25 @@ h1 { .main-container { position: relative; margin-top: 44px; } +======= + -webkit-mask: url("../img/app.svg") no-repeat 50% 50%; + mask: url("../img/app.svg") no-repeat 50% 50%; } + +#controls { + display: flex; + width: 100%; + position: relative; + top: 4px; } + #controls h2 { + margin-top: 12px; } + #controls #breadcrump { + flex-grow: 0; + overflow: hidden; } + #controls #breadcrump div.crumb { + overflow: hidden; + white-space: nowrap; + flex-shrink: 0; } +>>>>>>> master .col-100 { width: 100%; diff --git a/css/main.scss b/css/main.scss index 9401d254..f12e312b 100644 --- a/css/main.scss +++ b/css/main.scss @@ -7,27 +7,45 @@ h1 { padding-top: 44px; } +/* allow horizontal scrollbar + otherwise user management is not usable on mobile */ +@media only screen and (max-width: 768px) { + #app-content { + overflow-x: auto !important; + } +} + #app-content-wrapper { flex-direction: column; } .icon-polls { background-color: black; - mask: url('../img/polls.svg') no-repeat 50% 50%; + -webkit-mask: url('../img/app.svg') no-repeat 50% 50%; + mask: url('../img/app.svg') no-repeat 50% 50%; } #controls { // adopted from NC13 for compatibily with OC10 and NC11-NC12 - display: inline-flex; + display: flex; + width: 100%; + position: relative; + top: 4px; h2 { margin-top: 12px; } -} + #breadcrump { + flex-grow: 0; + overflow: hidden; + + div.crumb { + overflow: hidden; + white-space: nowrap; + flex-shrink: 0; + } + } -.main-container { - position: relative; - margin-top: 44px; } .col-100 { diff --git a/css/vendor/jquery.datetimepicker.min.css b/css/vendor/jquery.datetimepicker.min.css new file mode 100644 index 00000000..e3e02e2b --- /dev/null +++ b/css/vendor/jquery.datetimepicker.min.css @@ -0,0 +1 @@ +.xdsoft_datetimepicker{box-shadow:0 5px 15px -5px rgba(0,0,0,0.506);background:#fff;border-bottom:1px solid #bbb;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:8px;padding-left:0;padding-top:2px;position:absolute;z-index:9999;-moz-box-sizing:border-box;box-sizing:border-box;display:none}.xdsoft_datetimepicker.xdsoft_rtl{padding:8px 0 8px 8px}.xdsoft_datetimepicker iframe{position:absolute;left:0;top:0;width:75px;height:210px;background:transparent;border:0}.xdsoft_datetimepicker button{border:none !important}.xdsoft_noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.xdsoft_noselect::selection{background:transparent}.xdsoft_noselect::-moz-selection{background:transparent}.xdsoft_datetimepicker.xdsoft_inline{display:inline-block;position:static;box-shadow:none}.xdsoft_datetimepicker *{-moz-box-sizing:border-box;box-sizing:border-box;padding:0;margin:0}.xdsoft_datetimepicker .xdsoft_datepicker,.xdsoft_datetimepicker .xdsoft_timepicker{display:none}.xdsoft_datetimepicker .xdsoft_datepicker.active,.xdsoft_datetimepicker .xdsoft_timepicker.active{display:block}.xdsoft_datetimepicker .xdsoft_datepicker{width:224px;float:left;margin-left:8px}.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker{float:right;margin-right:8px;margin-left:0}.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker{width:256px}.xdsoft_datetimepicker .xdsoft_timepicker{width:58px;float:left;text-align:center;margin-left:8px;margin-top:0}.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker{float:right;margin-right:8px;margin-left:0}.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker{margin-top:8px;margin-bottom:3px}.xdsoft_datetimepicker .xdsoft_monthpicker{position:relative;text-align:center}.xdsoft_datetimepicker .xdsoft_label i,.xdsoft_datetimepicker .xdsoft_prev,.xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_today_button{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC)}.xdsoft_datetimepicker .xdsoft_label i{opacity:.5;background-position:-92px -19px;display:inline-block;width:9px;height:20px;vertical-align:middle}.xdsoft_datetimepicker .xdsoft_prev{float:left;background-position:-20px 0}.xdsoft_datetimepicker .xdsoft_today_button{float:left;background-position:-70px 0;margin-left:5px}.xdsoft_datetimepicker .xdsoft_next{float:right;background-position:0 0}.xdsoft_datetimepicker .xdsoft_next,.xdsoft_datetimepicker .xdsoft_prev,.xdsoft_datetimepicker .xdsoft_today_button{background-color:transparent;background-repeat:no-repeat;border:0 none;cursor:pointer;display:block;height:30px;opacity:.5;-ms-filter:"alpha(opacity=50)";outline:medium none;overflow:hidden;padding:0;position:relative;text-indent:100%;white-space:nowrap;width:20px;min-width:0}.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{float:none;background-position:-40px -15px;height:15px;width:30px;display:block;margin-left:14px;margin-top:7px}.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next{float:none;margin-left:0;margin-right:14px}.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev{background-position:-40px 0;margin-bottom:7px;margin-top:0}.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{height:151px;overflow:hidden;border-bottom:1px solid #ddd}.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div{background:#f5f5f5;border-top:1px solid #ddd;color:#666;font-size:12px;text-align:center;border-collapse:collapse;cursor:pointer;border-bottom-width:0;height:25px;line-height:25px}.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:first-child{border-top-width:0}.xdsoft_datetimepicker .xdsoft_today_button:hover,.xdsoft_datetimepicker .xdsoft_next:hover,.xdsoft_datetimepicker .xdsoft_prev:hover{opacity:1;-ms-filter:"alpha(opacity=100)"}.xdsoft_datetimepicker .xdsoft_label{display:inline;position:relative;z-index:9999;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:bold;background-color:#fff;float:left;width:182px;text-align:center;cursor:pointer}.xdsoft_datetimepicker .xdsoft_label:hover>span{text-decoration:underline}.xdsoft_datetimepicker .xdsoft_label:hover i{opacity:1.0}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select{border:1px solid #ccc;position:absolute;right:0;top:30px;z-index:101;display:none;background:#fff;max-height:160px;overflow-y:hidden}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect{right:-7px}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect{right:2px}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover{color:#fff;background:#ff8000}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option{padding:2px 10px 2px 5px;text-decoration:none !important}.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current{background:#3af;box-shadow:#178fe5 0 1px 3px 0 inset;color:#fff;font-weight:700}.xdsoft_datetimepicker .xdsoft_month{width:100px;text-align:right}.xdsoft_datetimepicker .xdsoft_calendar{clear:both}.xdsoft_datetimepicker .xdsoft_year{width:48px;margin-left:5px}.xdsoft_datetimepicker .xdsoft_calendar table{border-collapse:collapse;width:100%}.xdsoft_datetimepicker .xdsoft_calendar td>div{padding-right:5px}.xdsoft_datetimepicker .xdsoft_calendar th{height:25px}.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th{width:14.2857142%;background:#f5f5f5;border:1px solid #ddd;color:#666;font-size:12px;text-align:right;vertical-align:middle;padding:0;border-collapse:collapse;cursor:pointer;height:25px}.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th{width:12.5%}.xdsoft_datetimepicker .xdsoft_calendar th{background:#f1f1f1}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today{color:#3af}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default{background:#ffe9d2;box-shadow:#ffb871 0 1px 4px 0 inset;color:#000}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint{background:#c1ffc9;box-shadow:#00dd1c 0 1px 4px 0 inset;color:#000}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current{background:#3af;box-shadow:#178fe5 0 1px 3px 0 inset;color:#fff;font-weight:700}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,.xdsoft_datetimepicker .xdsoft_time_box>div>div.xdsoft_disabled{opacity:.5;-ms-filter:"alpha(opacity=50)";cursor:default}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled{opacity:.2;-ms-filter:"alpha(opacity=20)"}.xdsoft_datetimepicker .xdsoft_calendar td:hover,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{color:#fff !important;background:#ff8000 !important;box-shadow:none !important}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover{background:#3af !important;box-shadow:#178fe5 0 1px 3px 0 inset !important;color:#fff !important}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_disabled:hover{color:inherit !important;background:inherit !important;box-shadow:inherit !important}.xdsoft_datetimepicker .xdsoft_calendar th{font-weight:700;text-align:center;color:#999;cursor:default}.xdsoft_datetimepicker .xdsoft_copyright{color:#ccc !important;font-size:10px;clear:both;float:none;margin-left:8px}.xdsoft_datetimepicker .xdsoft_copyright a{color:#eee !important}.xdsoft_datetimepicker .xdsoft_copyright a:hover{color:#aaa !important}.xdsoft_time_box{position:relative;border:1px solid #ccc}.xdsoft_scrollbar>.xdsoft_scroller{background:#ccc !important;height:20px;border-radius:3px}.xdsoft_scrollbar{position:absolute;width:7px;right:0;top:0;bottom:0;cursor:pointer}.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar{left:0;right:auto}.xdsoft_scroller_box{position:relative}.xdsoft_datetimepicker.xdsoft_dark{box-shadow:0 5px 15px -5px rgba(255,255,255,0.506);background:#000;border-bottom:1px solid #444;border-left:1px solid #333;border-right:1px solid #333;border-top:1px solid #333;color:#ccc}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box{border-bottom:1px solid #222}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div{background:#0a0a0a;border-top:1px solid #222;color:#999}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label{background-color:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select{border:1px solid #333;background:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover{color:#000;background:#007fff}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current{background:#c50;box-shadow:#b03e00 0 1px 3px 0 inset;color:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==)}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th{background:#0a0a0a;border:1px solid #222;color:#999}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th{background:#0e0e0e}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today{color:#c50}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default{background:#ffe9d2;box-shadow:#ffb871 0 1px 4px 0 inset;color:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint{background:#c1ffc9;box-shadow:#00dd1c 0 1px 4px 0 inset;color:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current{background:#c50;box-shadow:#b03e00 0 1px 3px 0 inset;color:#000}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:hover{color:#000 !important;background:#007fff !important}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th{color:#666}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright{color:#333 !important}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a{color:#111 !important}.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover{color:#555 !important}.xdsoft_dark .xdsoft_time_box{border:1px solid #333}.xdsoft_dark .xdsoft_scrollbar>.xdsoft_scroller{background:#333 !important}.xdsoft_datetimepicker .xdsoft_save_selected{display:block;border:1px solid #ddd !important;margin-top:5px;width:100%;color:#454551;font-size:13px}.xdsoft_datetimepicker .blue-gradient-button{font-family:"museo-sans","Book Antiqua",sans-serif;font-size:12px;font-weight:300;color:#82878c;height:28px;position:relative;padding:4px 17px 4px 33px;border:1px solid #d7d8da;background:-moz-linear-gradient(top,#fff 0,#f4f8fa 73%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(73%,#f4f8fa));background:-webkit-linear-gradient(top,#fff 0,#f4f8fa 73%);background:-o-linear-gradient(top,#fff 0,#f4f8fa 73%);background:-ms-linear-gradient(top,#fff 0,#f4f8fa 73%);background:linear-gradient(to bottom,#fff 0,#f4f8fa 73%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f4f8fa',GradientType=0)}.xdsoft_datetimepicker .blue-gradient-button:hover,.xdsoft_datetimepicker .blue-gradient-button:focus,.xdsoft_datetimepicker .blue-gradient-button:hover span,.xdsoft_datetimepicker .blue-gradient-button:focus span{color:#454551;background:-moz-linear-gradient(top,#f4f8fa 0,#FFF 73%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f4f8fa),color-stop(73%,#FFF));background:-webkit-linear-gradient(top,#f4f8fa 0,#FFF 73%);background:-o-linear-gradient(top,#f4f8fa 0,#FFF 73%);background:-ms-linear-gradient(top,#f4f8fa 0,#FFF 73%);background:linear-gradient(to bottom,#f4f8fa 0,#FFF 73%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f8fa',endColorstr='#FFF',GradientType=0)} diff --git a/css/vote.css b/css/vote.css index 88d43cad..ada22a3a 100644 --- a/css/vote.css +++ b/css/vote.css @@ -1,13 +1,21 @@ #content { display: flex; } +<<<<<<< HEAD .row { +======= +.flex-row { +>>>>>>> master display: flex; flex-direction: row; flex-grow: 1; align-items: center; } +<<<<<<< HEAD .column { +======= +.flex-column { +>>>>>>> master display: flex; flex-direction: column; flex-grow: 0; @@ -20,6 +28,7 @@ color: red; font-weight: bold; } +<<<<<<< HEAD #breadcrump { flex-grow: 0; overflow: hidden; } @@ -29,6 +38,8 @@ div.crumb { white-space: nowrap; flex-shrink: 0; } +======= +>>>>>>> master .header { margin-left: 265px; padding: 0 17px; @@ -142,7 +153,11 @@ div.crumb { background-color: #e6f1f8; } #switchDetails { +<<<<<<< HEAD margin-right: 6px; } +======= + margin-right: 32px; } +>>>>>>> master .button.details .badge { position: relative; @@ -187,6 +202,7 @@ div.crumb { .authorRow .author.external > input { width: 100%; } +<<<<<<< HEAD #app-sidebar .close.row { justify-content: flex-end; margin: 8px 8px 0 0; } @@ -296,21 +312,146 @@ div.crumb { float: left; margin-top: 10px; display: none; } +======= +.detailsView { + z-index: 1000 !important; } + .detailsView .close.flex-row { + justify-content: flex-end; + margin: 8px 8px 0 0; } + .detailsView .header.flex-row { + flex-direction: row; + align-items: flex-start; + margin-left: 0; + margin-top: 0; } + .detailsView .pollInformation { + width: 220px; + flex-grow: 1; + flex-shrink: 1; + padding-right: 15px; } + .detailsView .pollInformation .authorRow .leftLabel { + margin-right: 4px; } + .detailsView .pollInformation .cloud { + margin: 4px 0; } + .detailsView .pollInformation .cloud > span { + color: #fff; + margin: 2px; + padding: 2px 4px; + border-radius: 3px; + float: left; + text-shadow: 1px 1px #666; + background-color: #aaa; } + .detailsView .pollInformation .cloud .open { + background-color: #49bc49; } + .detailsView .pollInformation .cloud .expired { + background-color: #f45573; } + .detailsView .pollInformation .cloud .information { + background-color: #b19c3e; } + .detailsView #expired_info { + margin: 0 15px; } + .detailsView .pollActions { + display: flex; + flex-direction: column; + margin-right: 15px; } + .detailsView .pollActions .close { + margin: 15px; + background-position: right top; + height: 30px; } + .detailsView .pollActions > ul > li:focus, .detailsView .pollActions > ul > li:focus > a, .detailsView .pollActions > ul > li:hover, .detailsView .pollActions > ul > li:hover > a, .detailsView .pollActions > ul > li.active, .detailsView .pollActions > ul > li.active > a, .detailsView .pollActions > ul > li a.selected, .detailsView .pollActions > ul > li a.selected > a { + opacity: 1; + box-shadow: inset 2px 0 #0082c9; } + .detailsView .pollActions > ul > li > a[class*="icon-"], + .detailsView .pollActions > ul > li > ul > li > a[class*="icon-"], + .detailsView .pollActions > ul > li > a[style*="background-image"], + .detailsView .pollActions > ul > li > ul > li > a[style*="background-image"] { + padding-left: 44px; } + .detailsView .pollActions > ul > li > a, + .detailsView .pollActions > ul > li > ul > li > a { + background-size: 16px 16px; + background-position: 14px center; + background-repeat: no-repeat; + display: block; + justify-content: space-between; + line-height: 44px; + min-height: 44px; + padding: 0 12px; + overflow: hidden; + box-sizing: border-box; + white-space: nowrap; + text-overflow: ellipsis; + color: #000; + opacity: 0.57; + flex: 1 1 0; + z-index: 100; } + .detailsView .pollActions > ul > li a, + .detailsView .pollActions > ul > li .app-navigation-entry-deleted { + padding-left: 44px !important; } + .detailsView #commentsTabView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; } + .detailsView #commentsTabView #commentBox { + border: 1px solid #dbdbdb; + border-radius: 3px; + padding: 7px 6px; + margin: 3px 3px 3px 40px; + cursor: text; } + .detailsView #commentsTabView .comment { + margin-bottom: 30px; } + .detailsView #commentsTabView .comment .comment-header { + background-color: #EEE; + border-bottom: 1px solid #DDD; + border-radius: 3px 3px 0 0; } + .detailsView #commentsTabView .comment .comment-date { + float: right; + color: #555; } + .detailsView #commentsTabView .comment .date { + position: absolute; + right: 0; + top: 5px; + opacity: .5; } + .detailsView #commentsTabView .message { + margin-left: 40px; + flex-grow: 1; + flex-shrink: 1; } + .detailsView #commentsTabView .new-comment .submitComment { + align-self: last baseline; + width: 30px; + margin: 0; + padding: 7px 9px; + background-color: transparent; + border: none; + opacity: .3; } + .detailsView #commentsTabView .new-comment .icon-loading-small { + float: left; + margin-top: 10px; + display: none; } +>>>>>>> master @media all and (max-width: 768px) { #app-content { position: relative !important; } } @media all and (max-width: 480px) { +<<<<<<< HEAD .row { flex-direction: column; } .row.user-cell, .row.counter, .row.counter .yes, .row.counter .no, .row.controls, .row.breadcrump, .row.submitPoll, .row.newCommentForm, .row.close { flex-direction: row; } .row.header { +======= + #votings { + padding: 0px 2px; } + + .flex-row { + flex-direction: column; } + .flex-row.user-cell, .flex-row.counter, .flex-row.counter .yes, .flex-row.counter .no, .flex-row.controls, .flex-row.breadcrump, .flex-row.submitPoll, .flex-row.newCommentForm, .flex-row.close { + flex-direction: row; } + .flex-row.header { +>>>>>>> master flex-grow: 1; margin-left: 0; margin-top: 44px; width: 120px; padding: 0 0 0 4px; } +<<<<<<< HEAD .row.header .vote { padding-right: 10px; } .row.header .vote.option { @@ -327,17 +468,40 @@ div.crumb { .row.user { display: none; } .row.current-user { +======= + .flex-row.header .vote { + padding-right: 10px; } + .flex-row.header .vote.option { + align-items: baseline; + width: 100%; + border-top: 1px solid #ddd; } + .flex-row.header .vote.time { + align-items: center; + width: 100%; + border-top: 1px solid #ddd; } + .flex-row.header .vote.time .counter { + flex-direction: column; + align-items: flex-end; } + .flex-row.user { + display: none; } + .flex-row.current-user { +>>>>>>> master display: flex; width: 44px; padding: 0; border: none; background-color: transparent; } +<<<<<<< HEAD .row.current-user .poll-cell { +======= + .flex-row.current-user .poll-cell { +>>>>>>> master border: none; border-radius: 0; border-top: 1px solid #ddd; background-color: transparent; padding: 0 2px; } +<<<<<<< HEAD .row.current-user .poll-cell.active.yes { background-image: url("../img/yes-vote-bordered.svg"); } .row.current-user .poll-cell.active.no { @@ -350,16 +514,42 @@ div.crumb { position: absolute; left: 22px; } .row.current-user .poll-cell, .row.current-user .toggle-cell { +======= + .flex-row.current-user .poll-cell.active.yes { + background-image: url("../img/yes-vote-bordered.svg"); } + .flex-row.current-user .poll-cell.active.no { + background-image: url("../img/no-vote-bordered.svg"); } + .flex-row.current-user .poll-cell.active.maybe { + background-image: url("../img/maybe-vote-bordered.svg"); } + .flex-row.current-user .poll-cell.active.unvoted { + background-image: url("../img/unvoted-vote-bordered.svg"); } + .flex-row.current-user .user-cell { + position: absolute; + left: 22px; } + .flex-row.current-user .poll-cell, .flex-row.current-user .toggle-cell { +>>>>>>> master width: 44px; height: 44px; background-color: transparent; } +<<<<<<< HEAD .column.table-body { flex-grow: 0; } .column.poll-cell, .column.table { flex-direction: row; align-items: center; } .column.vote.time { +======= + .description { + margin: 4px; } + + .flex-column.table-body { + flex-grow: 0; } + .flex-column.poll-cell, .flex-column.table { + flex-direction: row; + align-items: center; } + .flex-column.vote.time { +>>>>>>> master flex-direction: row; } .table { @@ -369,12 +559,20 @@ div.crumb { .submitPoll { border-top: 1px solid #ddd; +<<<<<<< HEAD box-shadow: 0px 0px 9px 2px #999999; +======= + box-shadow: 0 0 9px 2px #999999; +>>>>>>> master flex-wrap: wrap; align-items: center; position: fixed; background-color: #fff; bottom: 0; +<<<<<<< HEAD +======= + left: 0; +>>>>>>> master width: 100%; } .submitPoll .finish_vote { padding: 8px 8px; } @@ -387,7 +585,11 @@ div.crumb { height: 44px; width: unset; } +<<<<<<< HEAD #options.row { +======= + #options.flex-row { +>>>>>>> master flex-direction: column; width: 100%; } } @media all and (max-width: 320px) { diff --git a/css/vote.scss b/css/vote.scss index 1fc8ebf8..cc066e6b 100644 --- a/css/vote.scss +++ b/css/vote.scss @@ -20,14 +20,14 @@ $user-column-width: 265px; display:flex; } -.row { +.flex-row { display: flex; flex-direction: row; flex-grow: 1; align-items: center; } -.column { +.flex-column { display: flex; flex-direction: column; flex-grow: 0; @@ -45,21 +45,6 @@ $user-column-width: 265px; padding: 12px 17px; } -#controls { - // flex-grow: 0; -} - -#breadcrump { - flex-grow: 0; - overflow: hidden; -} - -div.crumb { - overflow: hidden; - white-space: nowrap; - flex-shrink: 0; -} - .header { margin-left: $user-column-width; padding: 0 17px; @@ -218,7 +203,7 @@ div.crumb { } #switchDetails { - margin-right: 6px; + margin-right: 32px; } .button.details { @@ -280,13 +265,14 @@ div.crumb { } -#app-sidebar { - .close.row { +.detailsView { + z-index: 1000 !important; + .close.flex-row { justify-content: flex-end; margin: 8px 8px 0 0; } - .header.row { + .header.flex-row { flex-direction: row; align-items: flex-start; margin-left: 0; @@ -455,7 +441,11 @@ div.crumb { } @media all and (max-width: (480px) ) { - .row { + #votings { + padding: 0px 2px; + } + + .flex-row { flex-direction: column; &.user-cell, &.counter, &.counter .yes, &.counter .no, &.controls, &.breadcrump, &.submitPoll, &.newCommentForm, &.close { @@ -481,7 +471,7 @@ div.crumb { border-top: $border_user; .counter { flex-direction: column; - align-items: right; + align-items: flex-end; } } } @@ -533,8 +523,11 @@ div.crumb { } } + .description { + margin: 4px; + } - .column { + .flex-column { &.table-body { flex-grow: 0; } @@ -556,12 +549,13 @@ div.crumb { .submitPoll { border-top: $border_user; - box-shadow: 0px 0px 9px 2px rgba(153,153,153,1); + box-shadow: 0 0 9px 2px rgba(153,153,153,1); flex-wrap: wrap; align-items: center; position: fixed; background-color: #fff; bottom: 0; + left: 0; width: 100%; .finish_vote { padding: 8px 8px; @@ -572,13 +566,19 @@ div.crumb { line-height: 2em; } } + + .table { + display: flex; + margin-right: 8px; + padding-bottom: 75px; + } .first { height: 44px; width: unset; } - #options.row { + #options.flex-row { flex-direction: column; width: 100%; } |