Knockout
/
Knockout-Lite
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

rework styling to be single column first with enhancement for supported browsers

master
Christopher Ross Hind 3 years ago
parent
9d15870b75
commit
f99e6aee28
11 changed files with 89 additions and 287 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -13
      app/Helper/PDA.php
  2. +38
    -0
      public/css/enhance.css
  3. +0
    -0
      public/css/ie.css
  4. +14
    -40
      public/css/main.css
  5. +0
    -83
      public/css/mobile.css
  6. +0
    -43
      public/css/page/index.css
  7. +11
    -40
      public/css/page/subforum.css
  8. +17
    -14
      public/css/page/thread.css
  9. +0
    -41
      public/css/pda.css
  10. +6
    -10
      resources/views/layout/default.blade.php
  11. +3
    -3
      resources/views/partial/header.blade.php

+ 0
- 13
app/Helper/PDA.php View File

@@ -1,13 +0,0 @@
<?php

namespace App\Helper;

class PDA
{
public static function isPDA()
{
$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
if (str_contains($ua, 'Windows CE; PPC;')) return true;
return false;
}
}

+ 38
- 0
public/css/enhance.css View File

@@ -0,0 +1,38 @@
/* switch navbar to a single line */
.titlebar {
min-height: 32px;
}

.titlebar a.logo {
position: absolute;
top: 5px;
left: 10px;
}

.titlebar .menu {
margin: 6px 0;
margin-left: 37px;
line-height: 20px;
height: 20px;
text-align: right;
}

/* break subforum listing into two columns */
.row.subforums .cell {
float: left;
width: 50%;
}

.row.subforums .cell.left .row {
margin-right: 5px;
}

.row.subforums .cell.right .row {
margin-left: 5px;
}

/* switch stats bar to single line */
.row.stats span {
float: left;
width: 25%;
}

+ 0
- 0
public/css/ie.css View File


+ 14
- 40
public/css/main.css View File

@@ -8,7 +8,7 @@ html {

body {
max-width: 1000px;
padding: 15px;
padding: 5px;
margin: 0 auto;
line-height: 1.3;
background: #333;
@@ -41,7 +41,7 @@ hr.textonly {
}

.row {
padding: 10px 15px;
padding: 5px 10px;
border: outset 1px #555;
background: #444;
}
@@ -64,9 +64,11 @@ hr.textonly {
.row.pagination {
text-align: center;
padding: 5px 15px;
font-size: 14px;
}

.row.breadcrumb {
font-size: 14px;
padding: 5px 15px;
background: #3e3e3e;
border-color: #4e4e4e;
@@ -81,71 +83,42 @@ hr.textonly {

.row.stats span {
display: block;
float: left;
width: 25%;
width: 100%;
text-align: center;
color: #aaa;
}

.row.titlebar {
position: relative;
min-height: 52px;
padding: 0;
text-align: center;
}

.titlebar .logo {
position: absolute;
top: 0;
left: 0;
text-decoration: none;
margin: 10px 15px;
height: 32px;
.titlebar a.logo {
display: inline;
border: none;
outline: none;
width: 32px;
height: 32px;
}

.titlebar .logo img {
position: absolute;
top: 0;
left: 0;
min-width: 32px;
min-height: 32px;
margin-right: 10px;
border: none;
}

.titlebar .logo h1 {
position: relative;
margin: 0;
padding: 0;
padding-left: 42px;
color: white;
display: inline;
text-align: left;
height: 32px;
line-height: 32px;
font-size: 28px;
font-weight: 600;
font-style: italic;
}

.titlebar .logo h1 span {
color: #ec3737;
}

.titlebar .menu {
position: relative;
padding: 10px 15px;
min-height: 32px;
text-align: right;
vertical-align: middle;
margin-top: 5px;
font-size: 14px;
}

.titlebar .menu a {
display: inline;
line-height: 32px;
color: #aaa;
text-decoration: none;
white-space: nowrap;
}

.titlebar a:hover {
@@ -221,6 +194,7 @@ hr.textonly {
}

.footer {
width: 100%;
margin-top: 10px;
min-height: 20px;
}


+ 0
- 83
public/css/mobile.css View File

@@ -1,83 +0,0 @@
@media only screen and (max-width: 600px) {

body {
font-size: 12px;
padding: 5px;
}

.row.titlebar {
padding: 10px 15px;
}

.titlebar .logo {
position: relative;
float: none;
margin: 0;
text-align: center;
min-width: 100%;
}

.titlebar .menu {
position: relative;
padding: 0;
text-align: center;
max-width: unset;
min-height: unset;
margin: 10px 0 0 0;
}

.titlebar .menu a {
padding-right: 5px;
padding-left: 0;
line-height: 1;
}

.cell {
width: auto;
float: none;
}

.cell.left .row,
.cell.right .row {
margin-right: 0;
margin-left: 0;
}

.row.spacer {
height: 5px;
}

.row.subforum,
.row.lastThread {
padding-top: 5px;
padding-bottom: 5px;
}

.row.lastThread {
margin-bottom: 5px;
}

.row.stats {
height: 30px;
}

.row.stats span {
width: 50%;
}

.row.thread a.left,
.row.thread a.right {
width: 100%;
text-align: left;
}

.post .postContent .quote {
width: auto;
}

.post .postContent .youtube {
width: auto;
height: auto;
}

}

+ 0
- 43
public/css/page/index.css View File

@@ -1,48 +1,9 @@
.row.highlights {
height: 250px;
padding: 0;
border-style: inset;
}

.row.highlights iframe {
width: 100%;
height: 100%;
border: none;
}

.row.subforums {
background: transparent !important;
padding: 0;
border: none;
}

body.simple .row.subforums {
padding: 0;
}

.cell {
width: 50%;
float: left;
}

.cell.left .row {
margin-right: 5px;
}

.cell.right .row {
margin-left: 5px;
}

body.simple .cell {
width: auto;
float: none;
}

body.simple .cell .row {
margin-left: 0;
margin-right: 0;
}

.row.subforum h3,
.row.lastThread h4 {
margin: 0;
@@ -66,7 +27,3 @@ body.simple .cell .row {
border-color: #4a4a4a;
margin-bottom: 10px;
}

body.simple .row.lastThread {
margin-bottom: 5px;
}

+ 11
- 40
public/css/page/subforum.css View File

@@ -2,10 +2,6 @@
padding: 0;
}

body.simple .row.threads {
padding: 0;
}

.row.thread {
position: relative;
padding-top: 0;
@@ -23,15 +19,6 @@ body.simple .row.threads {
height: 44px;
}

body.simple .row.thread img.icon {
position: relative;
display: inline;
top: unset;
left: unset;
width: 16px;
height: 16px;
}

.row.thread a {
margin: 1px 0;
display: block;
@@ -45,37 +32,21 @@ body.simple .row.thread img.icon {
padding-top: 10px;
}

body.simple .row.thread a.main {
display: inline;
padding-top: 0;
width: unset;
}

.row.thread .meta {
position: relative;
width: 100%;
font-size: 14px;
padding-bottom: 10px;
}

body.simple .row.thread .meta {
padding-bottom: 0;
}
/*.row.thread .meta a.left,*/
/*.row.thread .meta a.right {*/
/* display: block;*/
/* float: left;*/
/* width: 49.5%;*/
/*}*/

.row.thread .meta a.left,
.row.thread .meta a.right {
display: block;
float: left;
width: 49.5%;
}

.row.thread .meta a.right {
float: right;
text-align: right;
}

body.simple .row.thread .meta a {
float: none;
width: unset;
text-align: left;
font-size: 10px;
}
/*.row.thread .meta a.right {*/
/* float: right;*/
/* text-align: right;*/
/*}*/

+ 17
- 14
public/css/page/thread.css View File

@@ -36,19 +36,17 @@
left: 0;
right: 0;
z-index: 5;
padding: 6px 10px;
}

.postInfo .userForeground img.avatar {
float: left;
min-height: 32px;
max-height: 32px;
margin: 6px 15px;
margin-right: 10px;
}

.postInfo .userForeground .username {
float: left;
margin: 6px 15px;
color: white;
text-decoration: none;
}
@@ -56,21 +54,18 @@
.postInfo .userForeground .date {
color: #aaa;
text-decoration: none;
float: right;
margin: 6px 15px;
margin-right: 15px;
}

.postInfo.show-avatar .userForeground .username,
.postInfo.show-avatar .userForeground .date {
margin-top: 12px;
margin-bottom: 12px;
margin-left: 0;
.postInfo .userForeground .username,
.postInfo .userForeground .date {
display: block;
font-size: 14px;
line-height: 16px;
color: #fff;
}

.postInfo.show-background .userForeground .username,
.postInfo.show-background .userForeground .date {
color: #fff;
.postInfo .userForeground .date {
color: #aaa;
}

.postInfo.banned .userForeground .username,
@@ -78,6 +73,10 @@
color: #ff8f8f;
}

.post .postContent {
word-break: break-word;
}

.post .postContent .marginBreak {
height: 1px;
clear: both;
@@ -189,6 +188,10 @@
background: url('../../img/youtube-play.gif');
}

.post .ratings {
padding-top: 5px;
}

.post .ratings td {
padding: 0;
padding-right: 5px;


+ 0
- 41
public/css/pda.css View File

@@ -1,41 +0,0 @@
/* reduce padding */
body.simple {
padding: 5px;
}

body.simple .row {
padding: 5px;
}

body.simple .row.spacer {
height: 5px;
padding: 0;
}

/* Fix header styling */
body.simple .row.titlebar .logo {
position: relative;
padding: 0;
text-align: center;
margin: 0;
}

body.simple .row.titlebar .logo h1 {
padding-left: 0;
}

body.simple .row.titlebar .menu {
text-align: center;
padding: 10px 0 0 0;
}

body.simple .row.titlebar .menu a {
line-height: 1;
}

/* Fix stats styling */
body.simple .row.stats span {
display: block;
width: auto;
float: none;
}

+ 6
- 10
resources/views/layout/default.blade.php View File

@@ -1,6 +1,3 @@
@php
$pda = App\Helper\PDA::isPDA();
@endphp
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html class="lang-eng" dir="ltr" ng-app="" >
<head>
@@ -9,17 +6,16 @@
<meta name='mobile-web-app-capable' content='yes'>
<meta charset='ISO-8859-1'>
<link rel='icon' type='image/x-icon' href='/favicon.ico' />
<link rel='stylesheet' type='text/css' href='/css/main.css'/>
@if ($pda)
<link rel='stylesheet' type='text/css' href='/css/pda.css'/>
@else
<link rel='stylesheet' type='text/css' href='/css/mobile.css'/>
@endif
<link rel='stylesheet' type='text/css' href='/css/main.css' media="screen" />
<link rel="stylesheet" type="text/css" href="/css/enhance.css" media="handheld, screen and (min-width: 640px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/enhance.css" />
<![endif]-->
@yield('scripts')
<meta name='theme-color' content='#333'>
<title>Knockout Lite | @yield('title', 'Index')</title>
</head>
<body class="{{ $pda ? 'simple' : null }}">
<body>
@yield('page')
</body>
</html>

+ 3
- 3
resources/views/partial/header.blade.php View File

@@ -1,8 +1,8 @@
<div class="wrapper">
<div class="row titlebar">
<div class="logo">
<h1><img src="/img/logo.gif" alt=""/>knockout<span>!</span></h1>
</div>
<a class="logo" href="{{ route('index') }}">
<img src="/img/logo.gif" alt="Knockout!"/>
</a>
<div class="menu">
<a href="{{ route('index') }}">Home</a>
<span class="space">&nbsp;</span>


Write Preview
Loading…
Cancel
Save