diff options
author | dartcafe <github@dartcafe.de> | 2017-11-02 19:10:38 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2017-11-02 19:10:38 +0300 |
commit | e1ca9cf17eab56edebb782719c251f2f7320a784 (patch) | |
tree | 42c0344ae2f5bad11986be6ffe05f4df75868045 | |
parent | 9da3d1b7cbf63a248fb7eb2589188f23e61678b1 (diff) |
tidy
-rw-r--r-- | css/vote.scss | 348 | ||||
-rw-r--r-- | img/maybe-vote-bordered.svg | 12 | ||||
-rw-r--r-- | img/no-vote-bordered.svg | 12 | ||||
-rw-r--r-- | img/yes-toggle.svg | 60 | ||||
-rw-r--r-- | img/yes-vote-bordered.svg | 12 | ||||
-rw-r--r-- | js/vote.js | 21 | ||||
-rw-r--r-- | templates/goto.tmpl.php | 45 |
7 files changed, 238 insertions, 272 deletions
diff --git a/css/vote.scss b/css/vote.scss index ea851585..bc918ff7 100644 --- a/css/vote.scss +++ b/css/vote.scss @@ -13,41 +13,54 @@ $bg_current_user: #f7f7f7; $fg_current_user: #0082c9; $border_current_user: 2px solid; $border_user: 1px solid #ddd; - $user-column-width: 265px; -.votings { +#votings { position: relative !important; + .description { + padding: 12px 17px; + } } -// Flex settings .row { display: flex; flex-direction: row; flex-grow: 1; align-items: center; - &.user { - border-top: $border_user; - // height: 44px; - } - &.user, &.header, &.total, &.best{ - padding: 0 17px; - } + +} + +.column { + display: flex; + flex-direction: column; + flex-grow: 0; + flex-shrink: 0; } -#options.row { +.header { margin-left: $user-column-width; -} + .vote.option { + .date-box { + flex-grow: 1; + height: 32px; + } + -.description { - padding: 12px 17px; + .counter { + flex-grow: 0; + height: 32px; + } } +} -.column { - display: flex; - flex-direction: column; +.user { + border-top: $border_user; +} + +.user, .header { + padding: 0 17px; } .first { @@ -56,14 +69,16 @@ $user-column-width: 265px; width: $user-column-width; } +.vote, .poll-cell { + flex-grow: 1; + width: 85px; + margin: 2px; + align-items:center; +} + .date-box { - align-items: center; - display: flex; - flex-direction: column; - width: 70px; padding: 0 2px; - flex-shrink: 0; - flex-grow: 0; + align-items: center; .month, .dayow { font-size: 1.2em; color: #666; @@ -75,51 +90,40 @@ $user-column-width: 265px; } } -.summary { - display:flex; - width: 100%; - flex-direction: column; - align-items: center; - - .counter { - flex-direction: row; - display: flex; - flex-grow:1; - font-size: 18px; - &.winner { - background-color: $bg_yes; - } - - > div { - display:flex; - flex-grow:1; - flex-direction: row; - align-items: center; - margin: 0 8px; - .svg { - background-position: center; - background-repeat: no-repeat; - background-size: 24px; - height: 24px; - width: 24px; +.winner { + // background-color: $bg_yes; + font-style: italic; + font-weight: bold; + color: $fg_yes; +} - } +.counter { + font-size: 18px; + .yes, .no { + margin: 0 2px; + .svg { + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + height: 24px; + width: 24px; } - .yes { - color: $fg_yes; - .svg { - background-image: url('../img/yes-vote.svg'); - } - } - .no { - color: $fg_no; - .svg { - background-image: url('../img/no-vote.svg'); - } - } } + .yes { + color: $fg_yes; + .svg { + background-image: url('../img/yes-vote.svg'); + } + } + .no { + color: $fg_no; + .svg { + background-image: url('../img/no-vote.svg'); + } + } } + .avatar-cell { width: 40px; } @@ -128,100 +132,77 @@ $user-column-width: 265px; width: 180px; } +.poll-cell { + background-position: center; + background-repeat: no-repeat; + background-size: 32px; + height: 32px; -.vote-option, .time-slot, .poll-cell, .win_row, .column.total, .toggle-all { - flex-grow: 1; - // align-items: center; - width: 85px; - margin: 2px; - .vote, .toggle { - background-position: center; - background-repeat: no-repeat; - background-size: 32px; - height: 32px; + &.active { + cursor: pointer; + border: 2px solid; + border-radius: 4px; } &.yes { background-color: $bg_yes; color: $fg_yes; - border-color: $fg_yes; - .vote { - background-color: $bg_yes; - background-image: url('../img/yes-vote.svg'); - } - .toggle { - background-image: url('../img/yes-toggle.svg'); - } - + background-image: url('../img/yes-vote.svg'); } &.no { background-color: $bg_no; color: $fg_no; - border-color: $fg_no; - .vote { - background-color: $bg_no; - background-image: url('../img/no-vote.svg'); - } - .toggle { - background-image: url('../img/no-toggle.svg'); - } + background-image: url('../img/no-vote.svg'); } &.maybe { background-color: $bg_maybe; color: $fg_maybe; - border-color: $fg_maybe; - .vote { - background-color: $bg_maybe; - background-image: url('../img/maybe-vote.svg'); - } - .toggle { - background-image: url('../img/maybe-toggle.svg'); - } + background-image: url('../img/maybe-vote.svg'); } &.unvoted { background-color: $bg_unvoted; color: $fg_unvoted; - border-color: $fg_unvoted; - .vote { - background-color: $bg_unvoted; - } + background-color: $bg_unvoted; } } -.current-user { - .vote { - border: 2px solid; - border-radius: 4px; +.toggle-cell { + height: 28px; + height: 32px; + width: 32px; + flex-grow: 0; + cursor: pointer; + background-position: center; + background-repeat: no-repeat; + background-size: 28px; + + &.yes { + background-color: $bg_yes; + background-image: url('../img/yes-toggle.svg'); } - &.row { - background-color: #e6f1f8; -/* border-top: 2px solid #0082c9; - border-bottom: 2px solid #0082c9; - border-left: 0px solid #0082c9; - border-right: 0px solid #0082c9; - */ } - - .toggle-all { - height: 32px; - width: 40px; - flex-grow: 0; + &.no { + background-color: $bg_no; + background-image: url('../img/no-toggle.svg'); + } + + &.maybe { + background-color: $bg_maybe; + background-image: url('../img/maybe-toggle.svg'); } -} -.vote-option, .time-slot, .result-cell { - align-items: center; } -.wrapper { - display: flex; - align-items: center; + +.current-user { + background-color: #e6f1f8; } + // div stylings .badge { @@ -251,7 +232,6 @@ $user-column-width: 265px; min-width: 100px; } } - } .finish_vote { @@ -319,84 +299,98 @@ $user-column-width: 265px; .row { flex-direction: column; + + &.user-cell, &.counter, &.counter .yes, &.counter .no, { + flex-direction: row + } + + &.header { + flex-grow: 1; + margin-left: 0; + margin-top: 44px; + width:120px; + padding: 0 0 0 4px; + .vote { + padding-right: 10px; + &.option { + align-items: baseline; + width: 100%; + border-top: $border_user; + } + &.time { + align-items: center; + width: 100%; + border-top: $border_user; + .counter { + flex-direction: column; + align-items: right; + } + } + } + } + &.user { display: none; + } + + &.current-user { + display: flex; width: 44px; padding:0; border: none; - .poll-cell, .toggle-all { + background-color: transparent; + + .poll-cell { + border:none; + border-radius: 0; + border-top: 1px solid #ddd; + background-color: transparent; + padding: 0 2px; + &.active { + &.yes { + background-image: url('../img/yes-vote-bordered.svg'); + } + + &.no { + background-image: url('../img/no-vote-bordered.svg'); + } + + &.maybe { + background-image: url('../img/maybe-vote-bordered.svg'); + } + } + } + .user-cell { + position: absolute; + left: 22px; + } + .poll-cell, .toggle-cell { width: 44px; height: 44px; background-color: transparent; } - &.current-user { - display: flex; - &.row { - background-color: transparent; - } - .poll-cell { - border-top: 1px solid #ddd; - background-color: transparent; - // margin: 1px; - } - > ul { - } - .user-cell { - position: absolute; - left: 22px; - } - } - } - - &.header { - flex-grow: 1; - width:120px; - padding: 0 0 0 4px; } - &.total, &.best { - flex-grow: 0; - padding: 0; - } - } - #options.row { - margin-left: 0; - margin-top: 44px; } - - + .column { &.table-body { flex-grow: 0; } - &.total { - margin:0; - .result-cell { - flex-grow: 1; - } - } + &.poll-cell { flex-direction: row; align-items: center; - padding: 0 2px; } - } - - .vote-option, .time-slot, .poll-cell, .win_row, .column.total, .toggle-all { - .vote, .toggle { - height: 40px; - width: 40px; + &.vote.time { + flex-direction: row; } } + #options.row { flex-direction: column; width: 100%; - .vote-option, .time-slot { - align-items: baseline; - width: 100%; - border-top: $border_user; - } } } diff --git a/img/maybe-vote-bordered.svg b/img/maybe-vote-bordered.svg new file mode 100644 index 00000000..737da61d --- /dev/null +++ b/img/maybe-vote-bordered.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"> + <path + d="M 8.7452395,9.7187502 H 6.3215333 V 9.3897706 q 0,-0.550537 0.2215576,-0.9735107 Q 6.7646485,7.9865723 7.4763185,7.3286134 L 7.906006,6.9392091 Q 8.2886965,6.590088 8.463257,6.2812501 8.6445313,5.9724122 8.6445313,5.6635743 q 0,-0.4699707 -0.3222655,-0.7318115 -0.3222656,-0.2685547 -0.8996583,-0.2685547 -0.5438232,0 -1.1749267,0.2282715 -0.6311036,0.2215576 -1.315918,0.6646728 V 3.4479981 Q 5.7441407,3.1660157 6.4155274,3.0317384 7.0869142,2.897461 7.7113038,2.897461 q 1.6381837,0 2.4975582,0.6713867 0.859375,0.6646729 0.859375,1.9470215 0,0.657959 -0.261841,1.1816406 -0.26184,0.5169678 -0.8929438,1.114502 L 9.4837647,8.1947022 Q 9.0272218,8.6109621 8.8862307,8.866089 8.7452395,9.114502 8.7452395,9.4166261 Z M 6.3215333,10.712403 h 2.4237062 v 2.390136 H 6.3215333 Z" + style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffc107;fill-opacity:1" /> + <rect + style="fill:none;fill-opacity:1;stroke:#ffc107;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + width="15.000062" + height="15.000061" + x="0.49996963" + y="0.49996981" + ry="2.0592685" /> +</svg> diff --git a/img/no-vote-bordered.svg b/img/no-vote-bordered.svg new file mode 100644 index 00000000..fd99205d --- /dev/null +++ b/img/no-vote-bordered.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"> + <path + d="M 12.95,11.5455 11.536,12.9595 8,9.4235 4.465,12.9595 3.05,11.5455 6.586,8.0095 3.05,4.4735 4.465,3.0595 8,6.5955 l 3.516,-3.555 1.434,1.434 -3.536,3.535 z" + style="fill:#f45573;fill-opacity:1;stroke:none;stroke-opacity:1" /> + <rect + style="fill:none;fill-opacity:1;stroke:#f45573;stroke-width:0.99993926;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + width="15.000062" + height="15.000061" + x="0.49948388" + y="0.50045538" + ry="2.0592685" /> +</svg> diff --git a/img/yes-toggle.svg b/img/yes-toggle.svg index ffdf9b33..690628ba 100644 --- a/img/yes-toggle.svg +++ b/img/yes-toggle.svg @@ -1,68 +1,14 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<svg - xmlns:dc="http://purl.org/dc/elements/1.1/" - xmlns:cc="http://creativecommons.org/ns#" - xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" - xmlns:svg="http://www.w3.org/2000/svg" - xmlns="http://www.w3.org/2000/svg" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - height="16" - width="16" - id="svg2" - version="1.1" - inkscape:version="0.91 r13725" - sodipodi:docname="yes-toggle.svg"> - <metadata - id="metadata10"> - <rdf:RDF> - <cc:Work - rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type - rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - </cc:Work> - </rdf:RDF> - </metadata> - <sodipodi:namedview - pagecolor="#ffffff" - bordercolor="#666666" - borderopacity="1" - objecttolerance="10" - gridtolerance="10" - guidetolerance="10" - inkscape:pageopacity="0" - inkscape:pageshadow="2" - inkscape:window-width="1920" - inkscape:window-height="1017" - id="namedview8" - showgrid="false" - inkscape:zoom="32" - inkscape:cx="0.29729803" - inkscape:cy="7.257137" - inkscape:window-x="-8" - inkscape:window-y="-8" - inkscape:window-maximized="1" - inkscape:current-layer="svg2" - showguides="true" /> - <defs - id="defs4" /> +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"> <path d="M 8.0021297,12.218986 4.040336,8.2571749 5.171248,7.1254625 8.0021297,9.9539497 13.079631,4.8460305 14.22655,5.9937501 Z" - style="fill:#49bc49;fill-opacity:1" - id="path6" - inkscape:connector-curvature="0" /> + style="fill:#49bc49;fill-opacity:1" /> <rect style="opacity:1;fill:none;fill-opacity:0.71372549;fill-rule:nonzero;stroke:#49bc49;stroke-width:1.45034671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - id="rect8069" width="12.22084" height="12.572014" x="3.0941355" y="2.7473993" /> <path style="opacity:1;fill:none;fill-opacity:0.71372549;fill-rule:nonzero;stroke:#49bc49;stroke-width:1.45034671;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" - d="m 2.3685379,13.417275 -1.52706618,0 0,-12.57201512 12.22084228,0 0,1.17644712" - id="rect8069-3" - inkscape:connector-curvature="0" - sodipodi:nodetypes="ccccc" /> + d="m 2.3685379,13.417275 -1.52706618,0 0,-12.57201512 12.22084228,0 0,1.17644712" /> </svg> diff --git a/img/yes-vote-bordered.svg b/img/yes-vote-bordered.svg new file mode 100644 index 00000000..59f22158 --- /dev/null +++ b/img/yes-vote-bordered.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"> + <path + d="m 6.586499,12.606 -4.95,-4.95 1.413,-1.414 3.537,3.534 6.344002,-6.382 1.433,1.434 z" + style="fill:#49bc49;fill-opacity:1" /> + <rect + style="fill:none;fill-opacity:1;stroke:#49bc49;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + width="15.000971" + height="15.000972" + x="0.49951425" + y="0.49951378" + ry="2.0593936" /> +</svg> @@ -29,7 +29,7 @@ function updateBest(){ } }); var i = 0; - $('.counter').each(function() { + $('.vote').each(function() { var yes = parseInt($(this).find('.yes').text()); var no = parseInt($(this).find('.no').text()); $(this).toggleClass('winner', yes - no === maxVotes); @@ -153,21 +153,14 @@ $(document).ready(function () { $(this).select(); }); - $('.toggle-all').tooltip(); + $('.toggle-cell').tooltip(); $('.time-slot').tooltip(); $('.avatardiv').tooltip(); updateCounters(); -/* $('.poll-cell').each(function() { - var yes_c = $('#counter_yes_' + $(this).attr('id')); - var no_c = $('#counter_no_' + $(this).attr('id')); - $(yes_c).text(parseInt($(yes_c).text()) + ($(this).hasClass('yes') ? 1 : 0)); - $(no_c).text(parseInt($(no_c).text()) + ($(this).hasClass('no') ? 1 : 0)); - }); - */ }); -$(document).on('click', '.toggle-all, .cl_click', function() { +$(document).on('click', '.toggle-cell, .poll-cell.active', function() { valuesChanged = true; var $class = ""; var $toggle = ""; @@ -184,11 +177,11 @@ $(document).on('click', '.toggle-all, .cl_click', function() { $class = "yes"; $toggle= "maybe"; } - if($(this).hasClass('toggle-all')) { - $(".cl_click").attr('class', 'column cl_click poll-cell active ' + $toggle); - $(this).attr('class', 'toggle-all ' + $class); + if($(this).hasClass('toggle-cell')) { + $(".poll-cell.active").attr('class', 'column poll-cell active ' + $toggle); + $(this).attr('class', 'toggle-cell ' + $class); } else { - $(this).attr('class', 'column cl_click poll-cell active ' + $class); + $(this).attr('class', 'column poll-cell active ' + $class); } updateCounters(); }); diff --git a/templates/goto.tmpl.php b/templates/goto.tmpl.php index c96630b4..804bf805 100644 --- a/templates/goto.tmpl.php +++ b/templates/goto.tmpl.php @@ -124,40 +124,37 @@ <div id="votings" class="main-container"> <div class="wordwrap description"><?php p($description); ?></div> <div class="table"> - <div id="header-row" class="row header"> - <ul id="options" class="row" > + <ul class="row header" > <?php foreach ($dates as $el) { if ($poll->getType() == '0') { $timestamp = strtotime($el->getDt()); - print_unescaped('<li id="slot_' . $el->getId() . '" title="' . $el->getDt() . ' ' . date_default_timezone_get() . '" class="column time-slot" data-timestamp="' . $timestamp . '"data-value-utc="' . $el->getDt() . '">'); + print_unescaped('<li id="slot_' . $el->getId() . '" title="' . $el->getDt() . ' ' . date_default_timezone_get() . '" class="column vote time" data-timestamp="' . $timestamp . '"data-value-utc="' . $el->getDt() . '">'); - print_unescaped(' <div class="date-box">'); + print_unescaped(' <div class="date-box column">'); print_unescaped(' <div class="month">' . $l->t(date('M', $timestamp)) . '</div>'); print_unescaped(' <div class="day">' . date('j', $timestamp) . '</div>'); print_unescaped(' <div class="dayow">' . $l->t(date('D', $timestamp)) . '</div>'); print_unescaped(' <div class="time">' . date('G:i', $timestamp) . ' UTC</div>'); print_unescaped(' </div>'); } else { - print_unescaped('<li id="slot_' . $el->getId() . '" title="' . preg_replace('/_\d+$/', '', $el->getText()) . '" class="column vote-option">' . preg_replace('/_\d+$/', '', $el->getText())); + print_unescaped('<li id="slot_' . $el->getId() . '" title="' . preg_replace('/_\d+$/', '', $el->getText()) . '" class="column vote option">'); + print_unescaped(' <div class="date-box column">' . preg_replace('/_\d+$/', '', $el->getText()).'</div>'); } - print_unescaped('<div class="summary">'); - print_unescaped(' <div class="counter">'); - print_unescaped(' <div class="yes">'); - print_unescaped(' <div class="svg"></div>'); - print_unescaped(' <div id="counter_yes_voteid_' . $el->getId() . '" class ="result-cell yes" data-voteId="' . $el->getId() . '">0</div>'); - print_unescaped(' </div>'); - print_unescaped(' <div class="no">'); - print_unescaped(' <div class="svg"></div>'); - print_unescaped(' <div id="counter_no_voteid_' . $el->getId() . '" class ="result-cell no" data-voteId="' . $el->getId() . '">0</div>'); - print_unescaped(' </div>'); + print_unescaped('<div class="counter row">'); + print_unescaped(' <div class="yes row">'); + print_unescaped(' <div class="svg"></div>'); + print_unescaped(' <div id="counter_yes_voteid_' . $el->getId() . '" class ="result-cell yes" data-voteId="' . $el->getId() . '">0</div>'); + print_unescaped(' </div>'); + print_unescaped(' <div class="no row">'); + print_unescaped(' <div class="svg"></div>'); + print_unescaped(' <div id="counter_no_voteid_' . $el->getId() . '" class ="result-cell no" data-voteId="' . $el->getId() . '">0</div>'); print_unescaped(' </div>'); print_unescaped('</div>'); } ?> </li> </ul> - </div> <ul class="column table-body"> <?php if ($votes != null) { @@ -200,14 +197,14 @@ ?> <li class="row user"> <div class="first"> - <div class="wrapper user-cell"> + <div class="user-cell row"> <div class="avatar-cell"> <div class="poll avatardiv" title="<?php p($avatarName)?>"></div> </div> <div class="name"><?php p($displayName) ?></div> </div> </div> - <ul class="wrapper row"> + <ul class="row"> <?php // loop over dts $i_tot = 0; @@ -242,7 +239,7 @@ break; } } - print_unescaped('<li id="'. $pollId . '" class="' . $class . '"><div class="vote"></div></li>'); + print_unescaped('<li id="'. $pollId . '" class="' . $class . '"></li>'); $i_tot++; } @@ -256,7 +253,7 @@ if (!$expired) { print_unescaped('<li class="row user current-user">'); print_unescaped(' <div class="row first">'); - print_unescaped(' <div class="wrapper user-cell">'); + print_unescaped(' <div class="user-cell row">'); print_unescaped(' <div class="avatar-cell">'); if (User::isLoggedIn()) { print_unescaped(' <div class="poll avatardiv" title="'.($userId).'"></div>'); @@ -270,11 +267,11 @@ } print_unescaped(' </div>'); print_unescaped(' </div>'); - print_unescaped(' <div id="toggle-all" class="toggle-all maybe" title="'. $toggleTooltip .'">'); + print_unescaped(' <div id="toggle-cell" class="toggle-cell maybe" title="'. $toggleTooltip .'">'); print_unescaped(' <div class="toggle"></div>'); print_unescaped(' </div>'); print_unescaped('</div>'); - print_unescaped('<ul class="wrapper row">'); + print_unescaped('<ul class="row">'); $i_tot = 0; foreach ($dates as $dt) { @@ -310,7 +307,7 @@ } } } - print_unescaped('<li id="' . $pollId . '" class="' . $class . ' ' . $activeClass . '" data-value="' . $dateId . '"><div class="vote"></div></li>'); + print_unescaped('<li id="' . $pollId . '" class="' . $class . ' ' . $activeClass . '" data-value="' . $dateId . '"></li>'); $i_tot++; } @@ -374,7 +371,7 @@ </div> <div class="column"> <div class="poll-info owner"> - <div class="wrapper user-cell"> + <div class="user-cell row"> <div class="avatar-cell"> <div class="poll avatardiv" title="<?php p($poll->getOwner());?>"></div> </div> |