diff --git a/config/app.default.php b/config/app.default.php index 28423dd..722647b 100644 --- a/config/app.default.php +++ b/config/app.default.php @@ -2,4 +2,13 @@ $VERLAINE = [ "app_url" => "", + "chart_colors" => [ + "#FF4B44", // Red. + "#FFD149", // Yellow. + "#56B3FF", // Dark blue. + "#FF9535", // Orange. + "#7DFF59", // Green. + "#FFAFEC", // Pink. + "#82FFE8", // Light blue. + ], ]; \ No newline at end of file diff --git a/index.php b/index.php index 5716fc3..73fd1be 100644 --- a/index.php +++ b/index.php @@ -92,6 +92,7 @@ Flight::route("POST /polls/@id:[a-fA-F0-9]+/vote", function ($id) { }); Flight::route("GET /polls/@id:[a-fA-F0-9]+/results", function ($id) { + global $VERLAINE; $poll = Poll::load_poll($id); if ($poll) { @@ -99,8 +100,8 @@ Flight::route("GET /polls/@id:[a-fA-F0-9]+/results", function ($id) { Flight::json(format_poll($poll)); //TODO Add a svg for results? else { - Flight::render("svg/results", ["poll" => $poll], "results_chart"); - Flight::render("results", ["poll" => $poll], "body_content"); + Flight::render("svg/results", ["poll" => $poll, "colors" => $VERLAINE["chart_colors"]], "results_chart"); + Flight::render("results", ["poll" => $poll, "chart_colors" => $VERLAINE["chart_colors"]], "body_content"); Flight::render("layout"); } } diff --git a/static/css/common.css b/static/css/common.css new file mode 100644 index 0000000..5ca9e69 --- /dev/null +++ b/static/css/common.css @@ -0,0 +1,102 @@ +html, body +{ + margin: 0; + padding: 0; +} + +body +{ + background: #242424; + color: #ECECEC; + + font-family: "Nunito", sans-serif; +} + +::-moz-focus-inner +{ border: none; } + +body h1 +{ + display: block; + margin: 1em auto; + font-size: 4em; + font-weight: 300; + text-align: center; +} + +main +{ + margin: 0 5%; +} + +main p +{ + font-size: 1.5em; + text-align: center; +} +main p strong +{ + font-family: "PT Serif", serif; + font-size: 1.2em; + font-weight: normal; +} + +main input, +main button, +main a.button +{ + transition: background 0.1s ease-in; + display: block; + margin: auto; + padding: 1em; + width: 25rem; + box-sizing: border-box; + + background: #141414; + color: #ECECEC; + border: none; + outline: none; + + font-size: 1.3em; + text-align: center; + text-decoration: none; +} +main input[type="submit"], +main button, +main a.button +{ cursor: pointer; } + +main input[type="submit"], +a.button.margin +{ margin-top: 1em; } + +main input:focus, +main input[type="submit"]:hover, +main button:hover, +main a.button:hover +{ background: #1D1D1D; } + +footer +{ + display: block; + margin: 5em; + color: #8E8E8E; + + font-size: 0.9em; + font-weight: 700; + text-align: center; +} + +@media screen and (max-width: 640px) +{ + body h1 + { font-size: 3em; } + + main input, + main button, + main a.button + { + width: 100%; + font-size: 1.2em; + } +} \ No newline at end of file diff --git a/static/css/home.css b/static/css/home.css new file mode 100644 index 0000000..fc285e3 --- /dev/null +++ b/static/css/home.css @@ -0,0 +1,47 @@ +main input[name="title"], +main input[name="title"]:focus +{ + background: transparent; + font-family: "PT Serif", serif; + font-size: 1.5em; +} + +@keyframes scalex +{ + 0% + { transform: scaleX(0); } + 100% + { transform: scaleX(1); } +} + +main #choices .choice +{ + animation: scalex 0.2s linear; + display: flex; + flex-direction: row; + margin: auto; + width: 25rem; +} +main #choices .choice > * +{ margin: 0; } +main #choices .choice input +{ font-family: "PT Serif", serif; } +main #choices .choice .delete +{ + background: #FF2E31; + width: 4em; +} + +@media screen and (max-width: 640px) +{ + main #choices .choice + { width: 100%; } + main #choices .choice input + { flex: 1; min-width: 0; } + main #choices .choice .delete + { flex: 0 0; min-width: 3em; } + + main input[name="title"], + main input[name="title"]:focus + { font-size: 1.3em; } +} \ No newline at end of file diff --git a/static/css/main.css b/static/css/main.css index 23a983e..74107a0 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,223 +1,7 @@ @import url("/static/fonts/Nunito/Nunito.css"); @import url("/static/fonts/PTSerif/PTSerif.css"); -html, body -{ - margin: 0; - padding: 0; -} - -body -{ - background: #242424; - color: #ECECEC; - - font-family: "Nunito", sans-serif; -} - -::-moz-focus-inner -{ border: none; } - -body h1 -{ - display: block; - margin: 1em auto; - font-size: 4em; - font-weight: 300; - text-align: center; -} - -main -{ - margin: 0 5%; -} - -main p -{ - font-size: 1.5em; - text-align: center; -} -main p strong -{ - font-family: "PT Serif", serif; - font-size: 1.2em; - font-weight: normal; -} - -main input, -main button, -main a.button -{ - transition: background 0.1s ease-in; - display: block; - margin: auto; - padding: 1em; - width: 25rem; - box-sizing: border-box; - - background: #141414; - color: #ECECEC; - border: none; - outline: none; - - font-size: 1.3em; - text-align: center; - text-decoration: none; -} -main input[type="submit"], -main button, -main a.button -{ cursor: pointer; } - -main input[type="submit"], -a.button.margin -{ margin-top: 1em; } - -main input:focus, -main input[type="submit"]:hover, -main button:hover, -main a.button:hover -{ background: #1D1D1D; } - -main input[name="title"], -main input[name="title"]:focus -{ - background: transparent; - font-family: "PT Serif", serif; - font-size: 1.5em; -} - -@keyframes scalex -{ - 0% - { transform: scaleX(0); } - 100% - { transform: scaleX(1); } -} - -main #choices .choice -{ - animation: scalex 0.2s linear; - display: flex; - flex-direction: row; - margin: auto; - width: 25rem; -} -main #choices .choice > * -{ margin: 0; } -main #choices .choice input -{ font-family: "PT Serif", serif; } -main #choices .choice .delete -{ - background: #FF2E31; - width: 4em; -} - -/* - * IFNEZIUN - */ -h1.poll -{ - margin: 1.5em 5%; - font-family: "PT Serif", serif; - font-size: 2.5rem; -} - -.option -{ - display: flex; - align-items: center; - margin: auto; - width: 25rem; - box-sizing: border-box; - - background: #141414; -} -.option > input -{ - position: absolute; - float: left; - width: 0; - opacity: 0; - cursor: pointer; -} -.option > .check -{ - flex: none; - display: flex; - align-items: center; - justify-content: center; - margin-left: 1em; - padding: 0; - width: 1.25em; - height: 1.25em; - background: #202020; -} -.option > .check::before -{ - content: ""; - transition: transform 0.1s linear, border-radius 0.4s ease-out; - display: block; - background: #0088E5; - width: 0.75em; - height: 0.75em; - border-radius: 50%; - transform: scale(0); -} -.option input:checked ~ .check::before -{ border-radius: 0; transform: scale(1); } -.option > label -{ - flex: 1; - display: block; - padding: 1em; - font-family: "PT Serif", serif; - font-size: 1.2em; - cursor: pointer; -} - -/* - * JHFNDSJH - */ - -main.results -{ - display: flex; - flex-direction: row; - justify-content: center; -} -main.results > * -{ flex: 1; } - -main.results .chart -{ flex: 2; max-height: 70vh; } -main.results .chart > svg -{ display: block; margin: auto; height: 100%; } - -main.results .options table -{ - margin: 0; - padding: 0 3em; - box-sizing: border-box; - width: 100%; - height: 100%; - font-size: 1.5em; -} -main.results .options table td -{ text-align: right; } -main.results .options .number -{ - font-family: "PT Serif", serif; - font-size: 2em; -} - -footer -{ - display: block; - margin: 5em; - color: #8E8E8E; - - font-size: 0.9em; - font-weight: 700; - text-align: center; -} \ No newline at end of file +@import "common.css"; +@import "home.css"; +@import "poll.css"; +@import "results.css"; \ No newline at end of file diff --git a/static/css/poll.css b/static/css/poll.css new file mode 100644 index 0000000..9716065 --- /dev/null +++ b/static/css/poll.css @@ -0,0 +1,67 @@ +h1.poll +{ + margin: 1.5em 5%; + font-family: "PT Serif", serif; + font-size: 2.5rem; +} + +.option +{ + display: flex; + align-items: center; + margin: auto; + width: 25rem; + box-sizing: border-box; + + background: #141414; +} +.option > input +{ + position: absolute; + float: left; + width: 0; + opacity: 0; + cursor: pointer; +} +.option > .check +{ + flex: none; + display: flex; + align-items: center; + justify-content: center; + margin-left: 1em; + padding: 0; + width: 1.25em; + height: 1.25em; + background: #202020; +} +.option > .check::before +{ + content: ""; + transition: transform 0.1s linear, border-radius 0.4s ease-out; + display: block; + background: #0088E5; + width: 0.75em; + height: 0.75em; + border-radius: 50%; + transform: scale(0); +} +.option input:checked ~ .check::before +{ border-radius: 0; transform: scale(1); } +.option > label +{ + flex: 1; + display: block; + padding: 1em; + font-family: "PT Serif", serif; + font-size: 1.2em; + cursor: pointer; +} + +@media screen and (max-width: 640px) +{ + h1.poll + { font-size: 2em; } + .option + { width: 100%; } +} \ No newline at end of file diff --git a/static/css/results.css b/static/css/results.css new file mode 100644 index 0000000..9d59517 --- /dev/null +++ b/static/css/results.css @@ -0,0 +1,59 @@ +main.results +{ + display: flex; + flex-direction: row; + justify-content: center; +} +main.results > * +{ flex: 1; } + +main.results .chart +{ flex: 2; max-height: 70vh; } +main.results .chart > svg +{ display: block; margin: auto; height: 100%; } + +main.results .options table +{ + margin: 0; + padding: 0 3em; + box-sizing: border-box; + width: 100%; + height: 100%; + font-size: 1.5em; +} +main.results .options table td +{ + padding: 0 1em; + text-align: right; +} +main.results .options .number +{ + font-family: "PT Serif", serif; + font-size: 2em; +} + +@media screen and (max-width: 640px) +{ + main.results + { + flex-direction: column; + align-items: center; + margin: auto; + width: 95%; + } + + main.results .options table + { + padding: 0; + width: 100%; + font-size: 1.2em; + } + main.results .options table td + { padding: 0 0.5em; } + + main.results .chart + { + margin-top: 2em; + width: 80%; + } +} \ No newline at end of file diff --git a/views/layout.php b/views/layout.php index 37fc42d..f416f1e 100644 --- a/views/layout.php +++ b/views/layout.php @@ -2,7 +2,8 @@ - Poll Verlaine + + Poll Verlaine diff --git a/views/results.php b/views/results.php index e73d30e..96453dd 100644 --- a/views/results.php +++ b/views/results.php @@ -1,4 +1,5 @@ options as $option) $total_votes += $option->votes; @@ -7,10 +8,10 @@ foreach ($poll->options as $option)
- options as $option): ?> + options as $index => $option): ?> - + diff --git a/views/svg/results.php b/views/svg/results.php index 47a18f4..047dfa7 100644 --- a/views/svg/results.php +++ b/views/svg/results.php @@ -1,16 +1,7 @@ options as $option) @@ -33,7 +24,11 @@ function percentage_pos_y($r, $percentage) options as $index => $option): ?> - 0 0.5 ? 1 : 0) ?> 1 L0 0" fill=""> + foreach ($poll->options as $index => $option): + if($options_percentages[$index] == 1): ?> + + + 0 0.5 ? 1 : 0) ?> 1 L0 0" fill=""> + \ No newline at end of file
votes ?>label ?>label ?> votes / $total_votes, 3)*100 ?>%