From d77954ddae7788c1c4dcd1508eaab89f3f7f65ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Sat, 20 Jan 2018 14:41:21 +0100 Subject: [PATCH] programs_view + css + media mixin --- www/data/css/styles.css | 99 ++++++++++++++++--- www/data/css/styles.min.css | 41 ++++++-- www/data/css/styles_befungerunner.scss | 4 +- www/data/css/styles_bfjoustrunner.scss | 2 +- www/data/css/styles_bloglist.scss | 2 +- www/data/css/styles_blogview_befunge.scss | 21 ++-- www/data/css/styles_config.scss | 75 +++++++++++++- www/data/css/styles_errorview.scss | 8 +- www/data/css/styles_eulerpanel.scss | 4 +- www/data/css/styles_footer.scss | 11 ++- www/data/css/styles_global.scss | 35 +++++-- www/data/css/styles_header.scss | 2 +- www/data/css/styles_programslist.scss | 6 +- www/data/css/styles_programspanel.scss | 2 +- www/data/css/styles_programsview.scss | 33 ++++++- www/data/images/icons.svg | 19 ++-- www/pages/programs_view.php | 23 +++-- www/statics/programs/AlephNote_description.md | 2 +- www/statics/programs/__all.php | 7 +- 19 files changed, 313 insertions(+), 83 deletions(-) diff --git a/www/data/css/styles.css b/www/data/css/styles.css index 0bf04d3..9b1a79d 100644 --- a/www/data/css/styles.css +++ b/www/data/css/styles.css @@ -1,3 +1,4 @@ +/* 400px */ body { background-color: #EEE; color: #CCC; @@ -17,11 +18,23 @@ body { @media (max-width: 767px) { .content-responsive { - width: auto; } } -@media (min-width: 768px) { + width: 95%; + width: calc(100% - 20px); + margin-left: auto; + margin-right: auto; } } +@media (min-width: 768px) and (max-width: 850px) { .content-responsive { - width: auto; } } -@media (min-width: 992px) { + width: 95%; + width: calc(100% - 20px); + margin-left: auto; + margin-right: auto; } } +@media (min-width: 851px) and (max-width: 991px) { + .content-responsive { + width: 95%; + width: calc(100% - 20px); + margin-left: auto; + margin-right: auto; } } +@media (min-width: 992px) and (max-width: 1199px) { .content-responsive { width: 724px; } } @media (min-width: 1200px) { @@ -54,17 +67,29 @@ body { background: -moz-linear-gradient(left, #CCC, #FFFFFF00); background: -webkit-linear-gradient(left, #CCC 0%, #FFFFFF00 100%); } +@media (max-width: 991px) { + .contentheader h1 { + text-align: center; + margin-left: 10px; + margin-right: 10px; } + + .contentheader hr { + background: -moz-radial-gradient(circle, #CCC, #FFFFFF00); + background: -webkit-radial-gradient(circle, #CCC 0%, #FFFFFF00 100%); } } .blockcontent { display: block; width: 100%; } .generic_hidden { - visibility: hidden !important; } + visibility: hidden !important; } .generic_collapsed { visibility: collapse !important; - display: none !important; } + display: none !important; + width: 0 !important; + height: 0 !important; } +/* 400px */ #headerdiv { z-index: 999; background-color: #333; @@ -133,6 +158,7 @@ body { #content { padding-top: 0; } } +/* 400px */ html, body { margin: 0; padding: 0; @@ -162,10 +188,13 @@ html, body { @media (max-width: 767px) { #footerdiv { width: auto; } } -@media (min-width: 768px) { +@media (min-width: 768px) and (max-width: 850px) { #footerdiv { width: auto; } } -@media (min-width: 992px) { +@media (min-width: 851px) and (max-width: 991px) { + #footerdiv { + width: auto; } } +@media (min-width: 992px) and (max-width: 1199px) { #footerdiv { width: 724px; } } @media (min-width: 1200px) { @@ -184,6 +213,7 @@ html, body { #footerdiv .footerspan2 { display: none; visibility: collapse; } } +/* 400px */ .bloglistelem_container { display: flex; align-items: center; @@ -234,6 +264,7 @@ html, body { @media (max-width: 767px) { .ble_title { font-size: 1.25em; } } +/* 400px */ .blogcontent { color: #333; border: 1px solid black; @@ -317,6 +348,7 @@ html, body { border: none !important; background: transparent !important; } +/* 400px */ #PEB_tableProblems .PEB_tablerowProblems:hover { background-color: #888; } #PEB_tableProblems .PEB_TC_Value { @@ -431,7 +463,7 @@ html, body { .bce_pag05 { flex-direction: row; } } -@media (min-width: 768px) { +@media (min-width: 768px) and (max-width: 850px) { .bce_pagination { flex-direction: column; } @@ -443,7 +475,19 @@ html, body { .bce_pag05 { flex-direction: row; } } -@media (min-width: 992px) { +@media (min-width: 851px) and (max-width: 991px) { + .bce_pagination { + flex-direction: column; } + + .bce_pag20 { + flex-direction: column; } + + .bce_pag10 { + flex-direction: row; } + + .bce_pag05 { + flex-direction: row; } } +@media (min-width: 992px) and (max-width: 1199px) { .bce_pagination { flex-direction: column; } @@ -467,9 +511,10 @@ html, body { .bce_pag05 { flex-direction: row; } } +/* 400px */ .ev_master { align-self: center; } - @media (min-width: 850px) { + @media (min-width: 851px) { .ev_master { padding-bottom: 80px; } } .ev_master .ev_code { @@ -488,10 +533,14 @@ html, body { .ev_master .ev_msg { font-size: 15pt; } } +/* 400px */ .prgl_parent { display: flex; flex-direction: column; } +@media (max-width: 850px) { + .prgl_parent { + align-items: center; } } .prgl_elem { display: flex; flex-direction: row; @@ -605,6 +654,7 @@ html, body { .prgl_elem_sdesc { display: none; visibility: hidden; } } +/* 400px */ .prgv_content { display: flex; flex-direction: column; @@ -630,8 +680,9 @@ html, body { margin-top: 15px; } .prgv_left { + display: inline-flex; + justify-content: center; flex-grow: 1; - text-align: center; margin-left: 10px; margin-top: auto; margin-bottom: auto; } @@ -724,6 +775,27 @@ html, body { background: -moz-radial-gradient(circle, #666, #FFFFFF00); background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%); } +@media (max-width: 991px) { + .prgv_content { + border: none; } } +@media (max-width: 767px) { + .prgv_top { + flex-direction: column; + margin-top: 0; } + + .prgv_left { + margin: 0 10px 10px 10px; } + + .prgv_right { + min-height: 0; + min-width: 0; } + + .prgv_right_lang { + justify-content: space-evenly; } + + #prgv_header h1 { + font-size: 28pt; } } +/* 400px */ .euler_pnl_base { display: inline-flex; flex-direction: column; @@ -817,6 +889,7 @@ html, body { .euler_pnl_cell_notexist { background: #CCCCCC; } +/* 400px */ .programs_pnl_base { display: inline-flex; flex-direction: column; @@ -900,6 +973,7 @@ html, body { margin-right: 6px; } .programs_pnl_base .programs_pnl_bottom_1, .programs_pnl_base .programs_pnl_bottom_2 { flex-direction: row; } } +/* 400px */ .bfjoust_runner_owner { border: 1px solid #888; background: #F8F8F8; @@ -977,6 +1051,7 @@ html, body { border-radius: 6px; border: 1px solid #CCC; } +/* 400px */ .bce_code { background: #F8F8F8; color: black; diff --git a/www/data/css/styles.min.css b/www/data/css/styles.min.css index 8918715..8a931c2 100644 --- a/www/data/css/styles.min.css +++ b/www/data/css/styles.min.css @@ -1,18 +1,23 @@ body{background-color:#EEE;color:#CCC;font-family:serif} #content{padding-top:64px;display:flex;justify-content:center;line-height:1.4;flex-direction:column;align-items:center} .content-responsive{margin-left:auto;margin-right:auto} -@media(max-width:767px){.content-responsive{width:auto}} -@media(min-width:768px){.content-responsive{width:auto}} -@media(min-width:992px){.content-responsive{width:724px}} +@media(max-width:767px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}} +@media(min-width:768px) and (max-width:850px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}} +@media(min-width:851px) and (max-width:991px){.content-responsive{width:95%;width:calc(100% - 20px);margin-left:auto;margin-right:auto}} +@media(min-width:992px) and (max-width:1199px){.content-responsive{width:724px}} @media(min-width:1200px){.content-responsive{width:1170px}} .content-fullheight{flex-grow:1} .contentheader{width:100%;color:#333;font-size:large} .contentheader h1{font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:32px;font-weight:900;margin-bottom:0} @media(max-width:767px){.contentheader h1{font-size:32px}} .contentheader hr{margin:0 0 25px 0;display:block;border:0;color:white;height:1px;background:#CCCCCCFF;background:-moz-linear-gradient(left,#CCC,#FFFFFF00);background:-webkit-linear-gradient(left,#CCC 0,#FFFFFF00 100%)} +@media(max-width:991px){ + .contentheader h1{text-align:center;margin-left:10px;margin-right:10px} + .contentheader hr{background:-moz-radial-gradient(circle,#CCC,#FFFFFF00);background:-webkit-radial-gradient(circle,#CCC 0,#FFFFFF00 100%)} +} .blockcontent{display:block;width:100%} .generic_hidden{visibility:hidden !important} -.generic_collapsed{visibility:collapse !important;display:none !important} +.generic_collapsed{visibility:collapse !important;display:none !important;width:0 !important;height:0 !important} #headerdiv{z-index:999;background-color:#333;display:flex;border-bottom:1px solid #111;box-shadow:0 0 8px #000;position:fixed;width:100%} #headerdiv .logowrapper{flex:initial;margin:0;padding:0;height:42px} #headerdiv .logowrapper .logo{height:30px;margin:4px 0 8px 6px;flex:initial} @@ -35,8 +40,9 @@ html,body{margin:0;padding:0;height:100%} #content{padding-bottom:60px} #footerdiv{position:absolute;bottom:0;width:100%;height:60px;text-align:center;left:0;right:0;margin:0 auto} @media(max-width:767px){#footerdiv{width:auto}} -@media(min-width:768px){#footerdiv{width:auto}} -@media(min-width:992px){#footerdiv{width:724px}} +@media(min-width:768px) and (max-width:850px){#footerdiv{width:auto}} +@media(min-width:851px) and (max-width:991px){#footerdiv{width:auto}} +@media(min-width:992px) and (max-width:1199px){#footerdiv{width:724px}} @media(min-width:1200px){#footerdiv{width:1170px}} #footerdiv hr{margin-bottom:5px;display:block;border:0;color:white;height:1px;background:#CCCCCCFF;background:-webkit-gradient(radial,50% 50%,0,50% 50%,350,from(#CCC),to(#FFFFFF00))} @media(max-width:850px){#footerdiv .footerspan2{display:none;visibility:collapse}} @@ -106,13 +112,19 @@ html,body{margin:0;padding:0;height:100%} .bce_pag10{flex-direction:column} .bce_pag05{flex-direction:row} } -@media(min-width:768px){ +@media(min-width:768px) and (max-width:850px){ .bce_pagination{flex-direction:column} .bce_pag20{flex-direction:column} .bce_pag10{flex-direction:row} .bce_pag05{flex-direction:row} } -@media(min-width:992px){ +@media(min-width:851px) and (max-width:991px){ + .bce_pagination{flex-direction:column} + .bce_pag20{flex-direction:column} + .bce_pag10{flex-direction:row} + .bce_pag05{flex-direction:row} +} +@media(min-width:992px) and (max-width:1199px){ .bce_pagination{flex-direction:column} .bce_pag20{flex-direction:column} .bce_pag10{flex-direction:row} @@ -125,7 +137,7 @@ html,body{margin:0;padding:0;height:100%} .bce_pag05{flex-direction:row} } .ev_master{align-self:center} -@media(min-width:850px){.ev_master{padding-bottom:80px}} +@media(min-width:851px){.ev_master{padding-bottom:80px}} .ev_master .ev_code{color:#000;text-align:center;font-size:150pt;font-weight:500;font-family:Consolas,Monaco,"Courier New",Menlo,monospace} .ev_master .ev_msg{color:#888;text-align:center;font-size:25pt} @media(max-width:767px){ @@ -133,6 +145,7 @@ html,body{margin:0;padding:0;height:100%} .ev_master .ev_msg{font-size:15pt} } .prgl_parent{display:flex;flex-direction:column} +@media(max-width:850px){.prgl_parent{align-items:center}} .prgl_elem{display:flex;flex-direction:row;text-decoration:none;background:#BBB;border:solid 1px #444;margin:5px 0} .prgl_elem:hover{background:#999;box-shadow:0 0 4px #000} .prgl_elem_left{padding:4px;display:flex} @@ -165,7 +178,7 @@ html,body{margin:0;padding:0;height:100%} #prgv_header h1{font-size:48pt;text-align:center;margin-top:5px} #prgv_header hr{background:-moz-radial-gradient(circle,#CCC,#FFFFFF00);background:-webkit-radial-gradient(circle,#CCC 0,#FFFFFF00 100%)} .prgv_top{display:flex;flex-direction:row;margin-top:15px} -.prgv_left{flex-grow:1;text-align:center;margin-left:10px;margin-top:auto;margin-bottom:auto} +.prgv_left{display:inline-flex;justify-content:center;flex-grow:1;margin-left:10px;margin-top:auto;margin-bottom:auto} .prgv_left img{max-height:100%;max-width:100%} .prgv_right{background:#BBB;border:1px solid #666;margin:0 10px;padding:8px 5px 2px 5px;min-height:250px;min-width:200px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto auto 1fr auto;grid-column-gap:15px;grid-row-gap:2px} .prgv_right_key{font-weight:bold} @@ -182,6 +195,14 @@ html,body{margin:0;padding:0;height:100%} .prgv_right_lang img{display:inline;height:16pt;max-width:32px;margin:1px 2px 0 2px} .prgv_center{margin:0 8px 8px 8px;padding:16px;background:#EEE;border:1px solid rgba(0,0,0,0.15)} .prgv_sep{margin:40px 0 40px 0;display:block;border:0;color:white;height:1px;background:#666666FF;background:-moz-radial-gradient(circle,#666,#FFFFFF00);background:-webkit-radial-gradient(circle,#666 0,#FFFFFF00 100%)} +@media(max-width:991px){.prgv_content{border:0}} +@media(max-width:767px){ + .prgv_top{flex-direction:column;margin-top:0} + .prgv_left{margin:0 10px 10px 10px} + .prgv_right{min-height:0;min-width:0} + .prgv_right_lang{justify-content:space-evenly} + #prgv_header h1{font-size:28pt} +} .euler_pnl_base{display:inline-flex;flex-direction:column;border:1px solid #AAA;border-radius:5px 5px 0 0;margin:15px} .euler_pnl_header{display:flex;align-items:center;justify-content:center;padding:4px;background:#AAA} .euler_pnl_header a{color:#222;text-decoration:none;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:900} diff --git a/www/data/css/styles_befungerunner.scss b/www/data/css/styles_befungerunner.scss index 3cf32a8..52b26c4 100644 --- a/www/data/css/styles_befungerunner.scss +++ b/www/data/css/styles_befungerunner.scss @@ -80,7 +80,7 @@ } } -@media (max-width: 767px) { +@include rdmedia(0) { .bce_code { .bce_code_ctrl{ @@ -133,7 +133,7 @@ flex-direction: column; } } -@media (max-width: 767px) { +@include rdmedia(0) { .bce_code_out { flex-direction: column; diff --git a/www/data/css/styles_bfjoustrunner.scss b/www/data/css/styles_bfjoustrunner.scss index fc71a78..462d4a5 100644 --- a/www/data/css/styles_bfjoustrunner.scss +++ b/www/data/css/styles_bfjoustrunner.scss @@ -21,7 +21,7 @@ .sink { height: 100px; } .bottomelem { height: 200px; } - @media (max-width: 767px) { + @include rdmedia(0) { .hsplit { display:block; } .hsplit_1 { display:block; width: calc(100% - 8px); } .hsplit_2 { display:block; width: calc(100% - 8px); } diff --git a/www/data/css/styles_bloglist.scss b/www/data/css/styles_bloglist.scss index 545aedc..8c93bcd 100644 --- a/www/data/css/styles_bloglist.scss +++ b/www/data/css/styles_bloglist.scss @@ -43,5 +43,5 @@ margin: 2px 0 2px 10px; } -@media(max-width:767px) { .ble_title { font-size: 1.25em; } } +@include rdmedia(0) { .ble_title { font-size: 1.25em; } } diff --git a/www/data/css/styles_blogview_befunge.scss b/www/data/css/styles_blogview_befunge.scss index 7970946..5912ac4 100644 --- a/www/data/css/styles_blogview_befunge.scss +++ b/www/data/css/styles_blogview_befunge.scss @@ -78,11 +78,11 @@ } -@media(max-width:1199px) { +@include rdmedia_range(0,3) { #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; } } -@media(max-width:767px) { +@include rdmedia(0) { #PEB_tableProblems tr td:nth-child(1), #PEB_tableProblems tr th:nth-child(1) { display: none; } #PEB_tableProblems tr td:nth-child(3), #PEB_tableProblems tr th:nth-child(3) { display: none; } #PEB_tableProblems tr td:nth-child(4), #PEB_tableProblems tr th:nth-child(4) { display: none; } @@ -134,8 +134,7 @@ } - -@media(max-width:767px) +@include rdmedia(0) { .bce_pagination { flex-direction: column; } .bce_pag20 { flex-direction: column; } @@ -143,7 +142,7 @@ .bce_pag05 { flex-direction: row; } } -@media(min-width:768px) +@include rdmedia(1) { .bce_pagination { flex-direction: column; } .bce_pag20 { flex-direction: column; } @@ -151,8 +150,7 @@ .bce_pag05 { flex-direction: row; } } - -@media(min-width:992px) +@include rdmedia(2) { .bce_pagination { flex-direction: column; } .bce_pag20 { flex-direction: column; } @@ -160,8 +158,15 @@ .bce_pag05 { flex-direction: row; } } +@include rdmedia(3) +{ + .bce_pagination { flex-direction: column; } + .bce_pag20 { flex-direction: column; } + .bce_pag10 { flex-direction: row; } + .bce_pag05 { flex-direction: row; } +} -@media(min-width:1200px) +@include rdmedia(4) { .bce_pagination { flex-direction: column; } .bce_pag20 { flex-direction: row; } diff --git a/www/data/css/styles_config.scss b/www/data/css/styles_config.scss index 985651f..3e4e99d 100644 --- a/www/data/css/styles_config.scss +++ b/www/data/css/styles_config.scss @@ -12,4 +12,77 @@ $COL_HIGHLIGHT_RED: #442222; $FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; $FONT_CODE: Consolas, Monaco, "Courier New", Menlo, monospace; -$FONT_DEFAULT: serif; \ No newline at end of file +$FONT_DEFAULT: serif; + + +// [0] ResponsiveDesign Minimal Mobile +// content_width = auto +// header = vertical +$RD_0_MINIMOBILE_MIN: 0px; /* 400px */ +$RD_0_MINIMOBILE_MAX: 767px; + +// [1] ResponsiveDesign Normal Mobile +// content_width = auto +// header = vertical +$RD_1_NORMMOBILE_MIN: 768px; +$RD_1_NORMMOBILE_MAX: 850px; + +// [2] ResponsiveDesign Small Desktop +// content_width = auto +// header = vertical +$RD_2_SMALLDESKTOP_MIN: 851px; +$RD_2_SMALLDESKTOP_MAX: 991px; + +// [3] ResponsiveDesign Medium Desktop +// content_width = auto +// header = vertical +$RD_3_MEDDESKTOP_MIN: 992px; +$RD_3_MEDDESKTOP_MAX: 1199px; + +// [4] ResponsiveDesign Large Desktop +// content_width = auto +// header = vertical +$RD_4_LARGEDESKTOP_MIN: 1200px; +$RD_4_LARGEDESKTOP_MAX: 99999px; + +@function rdmedia_expr($min, $max) { + + $w1: ""; + $w2: ""; + + @if ($min == 0) { $w1: $RD_0_MINIMOBILE_MIN; } + @if ($min == 1) { $w1: $RD_1_NORMMOBILE_MIN; } + @if ($min == 2) { $w1: $RD_2_SMALLDESKTOP_MIN; } + @if ($min == 3) { $w1: $RD_3_MEDDESKTOP_MIN; } + @if ($min == 4) { $w1: $RD_4_LARGEDESKTOP_MIN; } + + @if ($max == 0) { $w2: $RD_0_MINIMOBILE_MAX; } + @if ($max == 1) { $w2: $RD_1_NORMMOBILE_MAX; } + @if ($max == 2) { $w2: $RD_2_SMALLDESKTOP_MAX; } + @if ($max == 3) { $w2: $RD_3_MEDDESKTOP_MAX; } + @if ($max == 4) { $w2: $RD_4_LARGEDESKTOP_MAX; } + + @if (($min == 0) and ($max == 4)) { @return "(all)"; } + @if ($min == 0 ) { @return "(max-width:"+$w2+")"; } + @if ($max == 4 ) { @return "(min-width:"+$w1+")"; } + + @return "(min-width:"+$w1+") and (max-width:"+$w2+")"; +} + +@mixin rdmedia_range($min, $max) { + @media #{rdmedia_expr($min, $max)} + { + + @content; + + } +} + +@mixin rdmedia($lvl) { + @media #{rdmedia_expr($lvl, $lvl)} + { + + @content; + + } +} \ No newline at end of file diff --git a/www/data/css/styles_errorview.scss b/www/data/css/styles_errorview.scss index e5eb586..19aa757 100644 --- a/www/data/css/styles_errorview.scss +++ b/www/data/css/styles_errorview.scss @@ -4,7 +4,7 @@ align-self: center; - @media(min-width:850px) {padding-bottom: 80px;} + @include rdmedia_range(2,4) {padding-bottom: 80px;} .ev_code { color: #000; @@ -20,9 +20,9 @@ font-size: 25pt; } - @media(max-width:767px) { - .ev_code { font-size: 75pt; } - .ev_msg { font-size: 15pt; } + @include rdmedia(0) { + .ev_code { font-size: 75pt; } + .ev_msg { font-size: 15pt; } } } \ No newline at end of file diff --git a/www/data/css/styles_eulerpanel.scss b/www/data/css/styles_eulerpanel.scss index d33f324..26efc29 100644 --- a/www/data/css/styles_eulerpanel.scss +++ b/www/data/css/styles_eulerpanel.scss @@ -28,7 +28,7 @@ font-weight: 900; } -@media (max-width: 850px) { .euler_pnl_header a { font-size: 16px; } } +@include rdmedia_range(0,1) { .euler_pnl_header a { font-size: 16px; } } .euler_pnl_header a:hover { text-decoration: underline; @@ -49,7 +49,7 @@ flex-wrap: wrap; } -@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } } +@include rdmedia_range(0,1) { .euler_pnl_row { flex-direction: column; } } .euler_pnl_row2 { display: flex; diff --git a/www/data/css/styles_footer.scss b/www/data/css/styles_footer.scss index 68b46a1..c5aa87d 100644 --- a/www/data/css/styles_footer.scss +++ b/www/data/css/styles_footer.scss @@ -35,10 +35,11 @@ html, body { //---------------------------------------------- -@media(max-width:767px) { #footerdiv { width: auto; } } -@media(min-width:768px) { #footerdiv { width: auto; } } -@media(min-width:992px) { #footerdiv { width: 724px; } } -@media(min-width:1200px){ #footerdiv { width: 1170px; } } +@include rdmedia(0) { #footerdiv { width: auto; } } +@include rdmedia(1) { #footerdiv { width: auto; } } +@include rdmedia(2) { #footerdiv { width: auto; } } +@include rdmedia(3) { #footerdiv { width: 724px; } } +@include rdmedia(4) { #footerdiv { width: 1170px; } } #footerdiv hr { margin-bottom: 5px; @@ -50,6 +51,6 @@ html, body { background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT)); } -@media (max-width: 850px) { +@include rdmedia_range(0,1) { #footerdiv .footerspan2 {display: none; visibility: collapse;} } diff --git a/www/data/css/styles_global.scss b/www/data/css/styles_global.scss index 58ed0b3..020e6cd 100644 --- a/www/data/css/styles_global.scss +++ b/www/data/css/styles_global.scss @@ -22,10 +22,11 @@ body { margin-right: auto; } -@media(max-width:767px) { .content-responsive { width: auto; } } -@media(min-width:768px) { .content-responsive { width: auto; } } -@media(min-width:992px) { .content-responsive { width: 724px; } } -@media(min-width:1200px){ .content-responsive { width: 1170px; } } +@include rdmedia(0) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } } +@include rdmedia(1) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } } +@include rdmedia(2) { .content-responsive { width: 95%; width:calc(100% - 20px); margin-left: auto; margin-right: auto; } } +@include rdmedia(3) { .content-responsive { width: 724px; } } +@include rdmedia(4) { .content-responsive { width: 1170px; } } .content-fullheight { flex-grow: 1;} @@ -44,7 +45,7 @@ body { } -@media(max-width:767px) { .contentheader h1 { font-size: 32px; } } +@include rdmedia(0) { .contentheader h1 { font-size: 32px; } } .contentheader hr { margin: 0 0 25px 0; @@ -58,10 +59,30 @@ body { background: -webkit-linear-gradient(left, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%); } +@include rdmedia_range(0,2) { + .contentheader h1 { + text-align: center; + margin-left: 10px; + margin-right: 10px; + } + .contentheader hr { + background: -moz-radial-gradient( circle, $COL_TEXT_NORMAL, $COL_TRANSPARENT); + background: -webkit-radial-gradient(circle, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%); + } +} + .blockcontent { display: block; width: 100%; } -.generic_hidden { visibility: hidden !important; } -.generic_collapsed { visibility: collapse !important; display: none !important; } +.generic_hidden { + visibility: hidden !important; +} + +.generic_collapsed { + visibility: collapse !important; + display: none !important; + width:0 !important; + height:0 !important; +} diff --git a/www/data/css/styles_header.scss b/www/data/css/styles_header.scss index 76291e7..39c74e0 100644 --- a/www/data/css/styles_header.scss +++ b/www/data/css/styles_header.scss @@ -72,7 +72,7 @@ } -@media (max-width: 850px) { +@include rdmedia_range(0,1) { #headerdiv { position: static; diff --git a/www/data/css/styles_programslist.scss b/www/data/css/styles_programslist.scss index 34c29df..aee3696 100644 --- a/www/data/css/styles_programslist.scss +++ b/www/data/css/styles_programslist.scss @@ -6,6 +6,8 @@ flex-direction: column; } +@include rdmedia_range(0,1) { .prgl_parent {align-items: center;} } + .prgl_elem { display: flex; flex-direction: row; @@ -97,7 +99,7 @@ } -@media(max-width:1199px) +@include rdmedia_range(0,3) { .prgl_elem_title { font-size: 22pt; @@ -116,7 +118,7 @@ margin-bottom: 10px; } } -@media (max-width: 850px) +@include rdmedia_range(0,1) { .prgl_elem { flex-direction: column; diff --git a/www/data/css/styles_programspanel.scss b/www/data/css/styles_programspanel.scss index 9a3e9fa..d3acaba 100644 --- a/www/data/css/styles_programspanel.scss +++ b/www/data/css/styles_programspanel.scss @@ -110,7 +110,7 @@ } } -@media (max-width: 850px) { +@include rdmedia_range(0,1) { .programs_pnl_base { width: 320px; diff --git a/www/data/css/styles_programsview.scss b/www/data/css/styles_programsview.scss index d38e761..ef45092 100644 --- a/www/data/css/styles_programsview.scss +++ b/www/data/css/styles_programsview.scss @@ -30,8 +30,10 @@ } .prgv_left { + display: inline-flex; + justify-content: center; + flex-grow: 1; - text-align: center; margin-left: 10px; margin-top: auto; @@ -141,4 +143,33 @@ background: #666666FF; background: -moz-radial-gradient( circle, #666, #FFFFFF00); background: -webkit-radial-gradient(circle, #666 0%, #FFFFFF00 100%); +} + +@include rdmedia_range(0,2) { + .prgv_content { border: none; } +} + +@include rdmedia(0) { + + .prgv_top { + flex-direction: column; + margin-top: 0; + } + + .prgv_left { + margin: 0 10px 10px 10px; + } + + .prgv_right { + min-height: 0; + min-width: 0; + } + + .prgv_right_lang { + justify-content: space-evenly; + } + + #prgv_header h1 { + font-size: 28pt; + } } \ No newline at end of file diff --git a/www/data/images/icons.svg b/www/data/images/icons.svg index 5e62200..24b49f4 100644 --- a/www/data/images/icons.svg +++ b/www/data/images/icons.svg @@ -1,11 +1,12 @@ - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/www/pages/programs_view.php b/www/pages/programs_view.php index c4b8a3e..ebe031f 100644 --- a/www/pages/programs_view.php +++ b/www/pages/programs_view.php @@ -34,9 +34,7 @@ if ($prog === NULL) httpError(404, 'Program not found');

-
- Thumbnail (<?php echo $prog['name'] ?>) -
+
Thumbnail (<?php echo $prog['name'] ?>)
Name:
@@ -54,15 +52,16 @@ if ($prog === NULL) httpError(404, 'Program not found'); $url) { - if ($type === 'download') echo 'Download'; - if ($type === 'github') echo 'Github'; - if ($type === 'homepage') echo 'Homepage'; - if ($type === 'wiki') echo 'Wiki'; - if ($type === 'playstore') echo 'Google Playstore'; - if ($type === 'amazonappstore') echo 'Amazon Appstore'; - if ($type === 'windowsstore') echo 'Microsoft Store'; - if ($type === 'itunesstore') echo 'App Store'; - if ($type === 'sourceforge') echo 'Sourceforge'; + if ($type === 'download') echo 'Download'; + if ($type === 'github') echo 'Github'; + if ($type === 'homepage') echo 'Homepage'; + if ($type === 'wiki') echo 'Wiki'; + if ($type === 'playstore') echo 'Google Playstore'; + if ($type === 'amazonappstore') echo 'Amazon Appstore'; + if ($type === 'windowsstore') echo 'Microsoft Store'; + if ($type === 'itunesstore') echo 'App Store'; + if ($type === 'sourceforge') echo 'Sourceforge'; + if ($type === 'alternativeto') echo 'AlternativeTo'; } ?>
diff --git a/www/statics/programs/AlephNote_description.md b/www/statics/programs/AlephNote_description.md index d656087..586ab9c 100644 --- a/www/statics/programs/AlephNote_description.md +++ b/www/statics/programs/AlephNote_description.md @@ -1,6 +1,6 @@ An extensible, lightweight desktop note client for multiple back-ends -![](https://raw.githubusercontent.com/Mikescher/AlephNote/master/docs/preview.png) +  AlephNote is a lightweight note taking desktop app usable with multiple back-ends: diff --git a/www/statics/programs/__all.php b/www/statics/programs/__all.php index a843e5a..cc92f91 100644 --- a/www/statics/programs/__all.php +++ b/www/statics/programs/__all.php @@ -607,9 +607,10 @@ return 'add_date' => '2017-02-26', 'urls' => [ - 'download' => 'https://github.com/Mikescher/AlephNote/releases', - 'github' => 'https://github.com/Mikescher/AlephNote/', - 'homepage' => 'https://mikescher.github.io/AlephNote/', + 'download' => 'https://github.com/Mikescher/AlephNote/releases', + 'github' => 'https://github.com/Mikescher/AlephNote/', + 'homepage' => 'https://mikescher.github.io/AlephNote/', + 'alternativeto' => 'https://alternativeto.net/software/alephnote/', ], ], ]; \ No newline at end of file