Skip to content

Q
question2answer
Commit c9bd34d7 by Scott
Options

Refactor SnowFlat users CSS 

Keep ‘qa-top-users-item’ class, use wrapper class for each page type.
parent 80453a06
Showing with 39 additions and 63 deletions
qa-include/app/favorites.php
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
$ranking = array( $ranking = array(
'items' => array(), 'items' => array(),
'rows' => ceil(count($users)/qa_opt('columns_users')), 'rows' => ceil(count($users)/qa_opt('columns_users')),
'type' => 'top-users', 'type' => 'users',
); );
foreach ($users as $user) { foreach ($users as $user) {
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
$ranking = array( $ranking = array(
'items' => array(), 'items' => array(),
'rows' => ceil(count($tags)/qa_opt('columns_tags')), 'rows' => ceil(count($tags)/qa_opt('columns_tags')),
'type' => 'top-tags' 'type' => 'tags'
); );
foreach ($tags as $tag) { foreach ($tags as $tag) {
......
qa-include/pages/tags.php
...@@ -50,7 +50,8 @@ $qa_content['title'] = qa_lang_html('main/popular_tags'); ...@@ -50,7 +50,8 @@ $qa_content['title'] = qa_lang_html('main/popular_tags');
$qa_content['ranking'] = array( $qa_content['ranking'] = array(
'items' => array(), 'items' => array(),
'rows' => ceil($pagesize / qa_opt('columns_tags')), 'rows' => ceil($pagesize / qa_opt('columns_tags')),
'type' => 'top-tags' 'type' => 'tags',
'sort' => 'count',
); );
if (count($populartags)) { if (count($populartags)) {
......
qa-include/pages/users-blocked.php
...@@ -71,7 +71,8 @@ $qa_content['title'] = $count > 0 ? qa_lang_html('users/blocked_users') : qa_lan ...@@ -71,7 +71,8 @@ $qa_content['title'] = $count > 0 ? qa_lang_html('users/blocked_users') : qa_lan
$qa_content['ranking'] = array( $qa_content['ranking'] = array(
'items' => array(), 'items' => array(),
'rows' => ceil(count($users) / qa_opt('columns_users')), 'rows' => ceil(count($users) / qa_opt('columns_users')),
'type' => 'blocked-users' 'type' => 'users',
'sort' => 'level',
); );
foreach ($users as $user) { foreach ($users as $user) {
......
qa-include/pages/users-newest.php
...@@ -62,7 +62,8 @@ $qa_content['title'] = qa_lang_html('main/newest_users'); ...@@ -62,7 +62,8 @@ $qa_content['title'] = qa_lang_html('main/newest_users');
$qa_content['ranking'] = array( $qa_content['ranking'] = array(
'items' => array(), 'items' => array(),
'rows' => ceil($pageSize / qa_opt('columns_users')), 'rows' => ceil($pageSize / qa_opt('columns_users')),
'type' => 'newest-users', 'type' => 'users',
'sort' => 'date',
); );
if (!empty($users)) { if (!empty($users)) {
......
qa-include/pages/users-special.php
...@@ -64,7 +64,8 @@ $qa_content['title'] = qa_lang_html('users/special_users'); ...@@ -64,7 +64,8 @@ $qa_content['title'] = qa_lang_html('users/special_users');
$qa_content['ranking'] = array( $qa_content['ranking'] = array(
'items' => array(), 'items' => array(),
'rows' => ceil(qa_opt('page_size_users') / qa_opt('columns_users')), 'rows' => ceil(qa_opt('page_size_users') / qa_opt('columns_users')),
'type' => 'special-users' 'type' => 'users',
'sort' => 'level',
); );
foreach ($users as $user) { foreach ($users as $user) {
......
qa-include/pages/users.php
...@@ -50,7 +50,8 @@ $qa_content['title'] = qa_lang_html('main/highest_users'); ...@@ -50,7 +50,8 @@ $qa_content['title'] = qa_lang_html('main/highest_users');
$qa_content['ranking'] = array( $qa_content['ranking'] = array(
'items' => array(), 'items' => array(),
'rows' => ceil($pagesize / qa_opt('columns_users')), 'rows' => ceil($pagesize / qa_opt('columns_users')),
'type' => 'top-users' 'type' => 'users',
'sort' => 'points',
); );
if (count($users)) { if (count($users)) {
......
qa-include/qa-theme-base.php
...@@ -815,6 +815,8 @@ class qa_html_theme_base ...@@ -815,6 +815,8 @@ class qa_html_theme_base
public function main_part($key, $part) public function main_part($key, $part)
{ {
$isRanking = strpos($key, 'ranking') === 0;
$partdiv = ( $partdiv = (
strpos($key, 'custom') === 0 || strpos($key, 'custom') === 0 ||
strpos($key, 'form') === 0 || strpos($key, 'form') === 0 ||
...@@ -822,13 +824,18 @@ class qa_html_theme_base ...@@ -822,13 +824,18 @@ class qa_html_theme_base
(strpos($key, 'q_view') === 0 && !isset($this->content['form_q_edit'])) || (strpos($key, 'q_view') === 0 && !isset($this->content['form_q_edit'])) ||
strpos($key, 'a_form') === 0 || strpos($key, 'a_form') === 0 ||
strpos($key, 'a_list') === 0 || strpos($key, 'a_list') === 0 ||
strpos($key, 'ranking') === 0 || $isRanking ||
strpos($key, 'message_list') === 0 || strpos($key, 'message_list') === 0 ||
strpos($key, 'nav_list') === 0 strpos($key, 'nav_list') === 0
); );
if ($partdiv) if ($partdiv) {
$this->output('<div class="qa-part-'.strtr($key, '_', '-').'">'); // to help target CSS to page parts $class = 'qa-part-' . strtr($key, '_', '-');
if ($isRanking)
$class .= ' qa-ranking-' . $part['type'] . '-' . (isset($part['sort']) ? $part['sort'] : 'points');
// help target CSS to page parts
$this->output('<div class="'.$class.'">');
}
if (strpos($key, 'custom') === 0) if (strpos($key, 'custom') === 0)
$this->output_raw($part); $this->output_raw($part);
...@@ -1367,7 +1374,7 @@ class qa_html_theme_base ...@@ -1367,7 +1374,7 @@ class qa_html_theme_base
if (!isset($ranking['type'])) if (!isset($ranking['type']))
$ranking['type'] = 'items'; $ranking['type'] = 'items';
$class = 'qa-'.$ranking['type']; $class = 'qa-top-' . $ranking['type'];
if (!$this->ranking_block_layout) { if (!$this->ranking_block_layout) {
// old, less semantic table layout // old, less semantic table layout
......
qa-theme/SnowFlat/qa-styles.css
...@@ -1454,10 +1454,7 @@ blockquote p { ...@@ -1454,10 +1454,7 @@ blockquote p {
padding: 5px; padding: 5px;
} }
.qa-top-users-item, .qa-top-users-item {
.qa-special-users-item,
.qa-blocked-users-item,
.qa-newest-users-item {
width: 100%; width: 100%;
max-width: 320px; max-width: 320px;
} }
...@@ -1469,10 +1466,7 @@ blockquote p { ...@@ -1469,10 +1466,7 @@ blockquote p {
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
/* two column layout for Desktops and above*/ /* two column layout for Desktops and above*/
.qa-top-users-item, .qa-top-users-item {
.qa-special-users-item,
.qa-blocked-users-item,
.qa-newest-users-item {
width: 48%; width: 48%;
max-width: none; max-width: none;
} }
...@@ -1483,25 +1477,17 @@ blockquote p { ...@@ -1483,25 +1477,17 @@ blockquote p {
} }
} }
.qa-top-users-avatar .qa-avatar-link, .qa-top-users-avatar .qa-avatar-link {
.qa-special-users-avatar .qa-avatar-link,
.qa-newest-users-avatar .qa-avatar-link {
display: block; display: block;
float: left; float: left;
margin-right: 1em; margin-right: 1em;
} }
.qa-top-users-avatar .qa-avatar-link img, .qa-top-users-avatar .qa-avatar-link img {
.qa-special-users-avatar .qa-avatar-link img,
.qa-blocked-users-avatar .qa-avatar-link img,
.qa-newest-users-avatar .qa-avatar-link img {
border: 1px solid #cbd7e3; border: 1px solid #cbd7e3;
} }
.qa-top-users-label .qa-user-link, .qa-top-users-label .qa-user-link {
.qa-special-users-label .qa-user-link,
.qa-blocked-users-label .qa-user-link,
.qa-newest-users-label .qa-user-link {
background-color: #e74c3c; background-color: #e74c3c;
display: block; display: block;
float: left; float: left;
...@@ -1511,21 +1497,12 @@ blockquote p { ...@@ -1511,21 +1497,12 @@ blockquote p {
} }
.qa-top-users-label .qa-user-link:hover, .qa-top-users-label .qa-user-link:hover,
.qa-top-users-label .qa-user-link:focus, .qa-top-users-label .qa-user-link:focus {
.qa-special-users-label .qa-user-link:hover,
.qa-special-users-label .qa-user-link:focus,
.qa-blocked-users-label .qa-user-link:hover,
.qa-blocked-users-label .qa-user-link:focus,
.qa-newest-users-label .qa-user-link:hover,
.qa-newest-users-label .qa-user-link:focus {
background-color: #eb695c; background-color: #eb695c;
text-decoration: none; text-decoration: none;
} }
.qa-top-users-label .qa-user-link:before, .qa-top-users-label .qa-user-link:before {
.qa-special-users-label .qa-user-link:before,
.qa-blocked-users-label .qa-user-link:before,
.qa-newest-users-label .qa-user-link:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -5px; left: -5px;
...@@ -1539,19 +1516,14 @@ blockquote p { ...@@ -1539,19 +1516,14 @@ blockquote p {
} }
@media (min-width: 980px) { @media (min-width: 980px) {
.qa-top-users-label .qa-user-link:hover:after, .qa-top-users-label .qa-user-link:focus:after, .qa-top-users-label .qa-user-link:hover:after,
.qa-special-users-label .qa-user-link:hover:after, .qa-special-users-label .qa-user-link:focus:after, .qa-top-users-label .qa-user-link:focus:after {
.qa-blocked-users-label .qa-user-link:hover:after, .qa-blocked-users-label .qa-user-link:focus:after,
.qa-newest-users-label .qa-user-link:hover:after, .qa-newest-users-label .qa-user-link:focus:after {
-ms-transform: translate(80px, 0); -ms-transform: translate(80px, 0);
-webkit-transform: translate(80px, 0); -webkit-transform: translate(80px, 0);
transform: translate(80px, 0); transform: translate(80px, 0);
} }
.qa-top-users-label .qa-user-link:after, .qa-top-users-label .qa-user-link:after {
.qa-special-users-label .qa-user-link:after,
.qa-blocked-users-label .qa-user-link:after,
.qa-newest-users-label .qa-user-link:after {
content: ""; content: "";
display: block; display: block;
width: 0; width: 0;
...@@ -1571,32 +1543,24 @@ blockquote p { ...@@ -1571,32 +1543,24 @@ blockquote p {
} }
} }
.qa-top-users-label .qa-user-link.qa-user-favorited, .qa-top-users-label .qa-user-link.qa-user-favorited {
.qa-special-users-label .qa-user-link.qa-user-favorited,
.qa-blocked-users-label .qa-user-link.qa-user-favorited,
.qa-newest-users-label .qa-user-link.qa-user-favorited {
background-image: url('images/icons/fev-star.png'); background-image: url('images/icons/fev-star.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 2px center; background-position: 2px center;
padding-left: 22px; padding-left: 22px;
} }
.qa-top-users-score, .qa-top-users-score {
.qa-special-users-score,
.qa-blocked-users-score,
.qa-newest-users-score {
position: relative; position: relative;
float: right; float: right;
padding: 2px 6px 2px 1.8em; padding: 2px 6px 2px 6px;
background-color: #2ecc71; background-color: #2ecc71;
color: #fff; color: #fff;
} }
.qa-special-users-score, .qa-ranking-users-points .qa-top-users-score {
.qa-blocked-users-score, padding-left: 1.8em;
.qa-newest-users-score {
padding-left: 6px;
} }
.qa-top-users-score:before { .qa-ranking-users-points .qa-top-users-score:before {
content: '\e810'; content: '\e810';
font-family: "fontello"; font-family: "fontello";
display: inline-block; display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment