Skip to content

Add keyboard support | fix UI #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 17, 2016
Merged

Add keyboard support | fix UI #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf4e37e
Add keyboard support | fix UI
Argeento Jul 10, 2016
3779f19
Update qa-styles.css
Argeento Jul 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 4 additions & 18 deletions forum/qa-include/qa-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -731,24 +731,10 @@ function qa_content_prepare($voting=false, $categoryids=null)
$logowidth=qa_opt('logo_width');
$logoheight=qa_opt('logo_height');

$adres = qa_path_absolute(qa_request());

if($adres=="http://forum.pasja-informatyki.pl/")
{
$qa_content['logo']='<a href="'.qa_path_html('').'" class="qa-logo-link">'.
'<dfnl data-info="Najnowsze pytania"><img src="'.qa_html(is_numeric(strpos($logourl, '://')) ? $logourl : qa_path_to_root().$logourl).'"'.
($logowidth ? (' width="'.$logowidth.'"') : '').($logoheight ? (' height="'.$logoheight.'"') : '').
' border="0" alt="'.qa_html(qa_opt('site_title')).'"/></dfnl></a>';

}
else
{
$qa_content['logo']='<a href="'.qa_path_html('').'" class="qa-logo-link">'.
'<dfnl data-info="Najnowsze pytania"><img src="'.qa_html(is_numeric(strpos($logourl, '://')) ? $logourl : qa_path_to_root().$logourl).'"'.
($logowidth ? (' width="'.$logowidth.'"') : '').($logoheight ? (' height="'.$logoheight.'"') : '').
' border="0" alt="'.qa_html(qa_opt('site_title')).'"/></dfnl></a>';
}

$qa_content['logo']='<a href="'.qa_path_html('').'" class="qa-logo-link">'.
'<dfn data-info="Najnowsze pytania"><img src="'.qa_html(is_numeric(strpos($logourl, '://')) ? $logourl : qa_path_to_root().$logourl).'"'.
($logowidth ? (' width="'.$logowidth.'"') : '').($logoheight ? (' height="'.$logoheight.'"') : '').
' border="0" alt="'.qa_html(qa_opt('site_title')).'"/></dfn></a>';
Copy link
Member

@efiku efiku Jul 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


$topath=qa_get('to'); // lets user switch between login and register without losing destination page

Expand Down
184 changes: 54 additions & 130 deletions forum/qa-theme/SnowFlat/qa-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ a {
a:active, a:focus {
color: #3498db;
text-decoration: none;
outline: 0;
}
a:visited {
color: #2980b9;
Expand All @@ -80,6 +79,16 @@ a:hover {
text-decoration: underline;
}

a:focus *[data-info]::after {
opacity: 1;
top: 30px;
z-index: 9999;
}

a[href*="qa.rss"] {
outline-color: #ffffff;
}

h1 {
font-size: 1.5em;
line-height: 2em;
Expand Down Expand Up @@ -125,7 +134,7 @@ hr {
img {
vertical-align: bottom;
max-width: 100%;
height: auto !important;
height: auto;
}

input, textarea, select {
Expand Down Expand Up @@ -195,16 +204,11 @@ blockquote p {

.qa-search-field {
margin: 0 -40px 0 0;
padding: 0 40px 0 0;
vertical-align: bottom;
padding: 0 40px 0 7px;
width: 98%;
height: 36px;
border-width: 1px;
border-style: solid;
border-color: #1ABC9C;
}
.qa-search-field:focus {
border-color: #e6e6e6;
border: 1px solid #1ABC9C;
outline-color: #126252;
}

.qa-search-button {
Expand All @@ -215,9 +219,14 @@ blockquote p {
height: 36px;
text-indent: 9999px;
width: 36px;
margin: 0 !important;
margin: 0;
border: none;
outline: none;
outline-color: #126252;
transition: background-color 0.2s;
}
.qa-search-button:hover,
.qa-search-button:focus {
background-color: #178972 !important; /* sorry */
}

@media (max-width: 1179px) {
Expand Down Expand Up @@ -474,66 +483,22 @@ blockquote p {

.qa-logo {
display: inline-block;
vertical-align: top;
font-size: 24px;
margin: 0 15px 0 15px;
}

.qa-logoA {
display: inline-block;
vertical-align: top;
font-size: 24px;
margin: 0 15px 0 15px;
background-color: #1F2B37;
}

.qa-logoA img {
max-height: 49px;
width: auto;
margin-right: -2px;
}

@media (max-width: 1179px) {

.qa-logo {
display: inline-block;
vertical-align: top;
font-size: 24px;
margin: 0 5px 0 15px;
background-color: #2C3E50;
padding-left: 10px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
padding: 4px 12px 4px 10px;
}

.qa-logo:hover {
background-color: #1F2B37;
}

.qa-logo img {
max-height: 55px;
width: auto;
}

.qa-logoA {
display: inline-block;
vertical-align: top;
font-size: 24px;
margin: 0 5px 0 15px;
background-color: #2C3E50;
padding-left: 10px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
}

.qa-logoA:hover {
background-color: #1F2B37;
}

.qa-logoA img {
max-height: 55px;
width: auto;
height: 55px;
}

.qa-header-menu {
Expand All @@ -544,15 +509,24 @@ blockquote p {
}

.qa-logo img {
max-height: 49px;
width: auto;
height: 48px;
}

.qa-logo-link {
line-height: 49px;
display: block;
}

.qa-logo-link dfn::after {
top: 15px;
left: -10px;
text-align: center;

}
.qa-logo-link dfn:hover::after {
top: 40px;

}

@media (min-width: 1180px) {
.qa-logo-link {
padding: 5px 10px;
Expand Down Expand Up @@ -647,7 +621,7 @@ blockquote p {
text-align: center;
}
}
.qa-nav-main-link:hover {
.qa-nav-main-link:hover, .qa-nav-main-link:focus {
text-decoration: none;
background: #1F2B37;
}
Expand Down Expand Up @@ -1491,8 +1465,11 @@ h1 a:hover, h1 a:focus, h1 a:visited {
text-decoration: none !important;
transition: all 0.75s ease-in-out 0s;
}

.qa-widget-side .qa-q-view-tag-item:hover,
.qa-widget-side .qa-q-view-tag-item:focus,
.qa-tag-link:hover,
.qa-widget-side .qa-q-view-tag-item:hover {
.qa-tag-link:focus {
background: #f39c12;
color: #fff !important;
transition: all 0.25s ease-in-out 0s;
Expand All @@ -1513,6 +1490,11 @@ h1 a:hover, h1 a:focus, h1 a:visited {
content: url('images/star14.png');
background-color: #b94a00;
}
.qa-widget-side .qa-q-view-tag-item:focus,
.qa-tag-link:focus {
outline-color: #21130C;
}


.qa-page-links-list {
margin: 0;
Expand Down Expand Up @@ -1913,12 +1895,10 @@ input, textarea, select {
input:focus, textarea:focus, select:focus {
background-color: #fff;
border-color: #3498db;
outline: 0;
}
input::-moz-focus-inner, textarea::-moz-focus-inner, select::-moz-focus-inner {
padding: 0;
border: 0;
outline: 0;
}

select:-moz-focusring {
Expand Down Expand Up @@ -2290,10 +2270,13 @@ input[type="submit"], button {
color: #fff;
border-bottom: 1px dotted #fff;
}
.qa-suggest-next a:hover {
.qa-suggest-next a:hover, .qa-suggest-next a:focus {
color: #fff;
border-bottom: 0;
}
.qa-suggest-next a:focus {
outline-color: #ffffff;
}

/*------[ q-view ]------*/
.qa-form-light-button {
Expand Down Expand Up @@ -3727,9 +3710,9 @@ input[type="submit"], button {
.qa-main-wrapper {
overflow: hidden;
*zoom: 1;

/* for Post Preview <div>*/
position: relative;
position: relative;
}

@media (min-width: 1180px) {
Expand Down Expand Up @@ -4462,66 +4445,9 @@ dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}

dfna {
font-style: normal;
position: relative;
}
dfna::after {
content: attr(data-info);
display: inline;
position: absolute;
top: 5px; left: -104px;
opacity: 0;
width: 155px;
font-size: 14px;
font-weight: 700;
line-height: 1.5em;
padding: 0.2em 0.1em;
background: rgba(31,43,55,0.95);
color: #fff;
pointer-events: none; /* This prevents the box from apearing when hovered. */
transition: opacity 250ms, top 250ms;
}
dfna::before {

dfn.tooltip-right-position::after {
left: -104px;
}
dfna:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfna:hover::after,
dfna:hover::before {opacity: 1;}
dfna:hover::after {top: 30px;}
dfna:hover::before {top: 20px;}

dfnl {
font-style: normal;
position: relative;
}
dfnl::after {
content: attr(data-info);
display: inline;
position: absolute;
top: 51px !important;
left: -10px !important;
opacity: 0;
width: 155px;
font-size: 14px;
font-weight: 700;
line-height: 1.5em;
padding: 0.2em 0.1em;
background: rgba(31,43,55,0.95);
color: #fff;
pointer-events: none; /* This prevents the box from apearing when hovered. */
transition: opacity 250ms, top 250ms;
text-align: center;
}
dfnl::before {

}
dfnl:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfnl:hover::after,
dfnl:hover::before {opacity: 1;}
dfnl:hover::after {top: 30px;}
dfnl:hover::before {top: 20px;}


a.sidebarnav {
font-weight: 400 !important;
Expand Down Expand Up @@ -4602,8 +4528,6 @@ a.sidebarnav:hover {
color: #8a0fd1;
}


<<<<<<< HEAD
/*
* for SPOJ detection
*/
Expand Down
6 changes: 3 additions & 3 deletions forum/qa-theme/SnowFlat/qa-theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -908,14 +908,14 @@ private function prepareSidebar($categories, $adres, $sidebar)
foreach ($categories as $category => $value) {
$isActiveCategory = $this->isActiveCategory($adres, $category);
$currentPosition++;
$tooltipPosition = (!in_array($currentPosition, [3, 4, 7, 8, 11, 12]) ? '' : 'a');
$tooltipPosition = (!in_array($currentPosition, [3, 4, 7, 8, 11, 12]) ? '' : 'tooltip-right-position');

$sidebar .= <<<EOF
<div class="qa-nav-main-item">
<a href="http://forum.pasja-informatyki.pl/questions/{$category}" class="qa-nav-main-link {$isActiveCategory['selected']} {$currentPosition}">
<dfn{$tooltipPosition} data-info="{$value['tooltip']}">
<dfn class="{$tooltipPosition}" data-info="{$value['tooltip']}">
<img src="//forum.pasja-informatyki.pl/qa-theme/SnowFlat/icons/{$value['icon']}{$isActiveCategory['hover']}.png" alt="{$value['tooltip']}" onmouseover="this.src='//forum.pasja-informatyki.pl/qa-theme/SnowFlat/icons/{$value['icon']}1.png'" onmouseout="this.src='//forum.pasja-informatyki.pl/qa-theme/SnowFlat/icons/{$value['icon']}0.png'" />
</dfn{$tooltipPosition}>
</dfn>
</a>
</div>
EOF;
Expand Down