From f99e6aee28d9635f4b936449519c495eee1b25cd Mon Sep 17 00:00:00 2001
From: Christopher Ross Hind <chrishind10@gmail.com>
Date: Sun, 17 Jan 2021 02:33:00 +0000
Subject: [PATCH] rework styling to be single column first with enhancement for
 supported browsers

---
 app/Helper/PDA.php                       | 13 ----
 public/css/enhance.css                   | 38 +++++++++++
 public/css/ie.css                        |  0
 public/css/main.css                      | 54 ++++-----------
 public/css/mobile.css                    | 83 ------------------------
 public/css/page/index.css                | 43 ------------
 public/css/page/subforum.css             | 51 ++++-----------
 public/css/page/thread.css               | 31 +++++----
 public/css/pda.css                       | 41 ------------
 resources/views/layout/default.blade.php | 16 ++---
 resources/views/partial/header.blade.php |  6 +-
 11 files changed, 89 insertions(+), 287 deletions(-)
 delete mode 100644 app/Helper/PDA.php
 create mode 100644 public/css/enhance.css
 delete mode 100644 public/css/ie.css
 delete mode 100644 public/css/mobile.css
 delete mode 100644 public/css/pda.css

diff --git a/app/Helper/PDA.php b/app/Helper/PDA.php
deleted file mode 100644
index 72d38e4..0000000
--- a/app/Helper/PDA.php
+++ /dev/null
@@ -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;
-    }
-}
diff --git a/public/css/enhance.css b/public/css/enhance.css
new file mode 100644
index 0000000..8304d1d
--- /dev/null
+++ b/public/css/enhance.css
@@ -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%;
+}
diff --git a/public/css/ie.css b/public/css/ie.css
deleted file mode 100644
index e69de29..0000000
diff --git a/public/css/main.css b/public/css/main.css
index 5365382..a6e6bc8 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -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;
 }
diff --git a/public/css/mobile.css b/public/css/mobile.css
deleted file mode 100644
index e7a76a8..0000000
--- a/public/css/mobile.css
+++ /dev/null
@@ -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;
-	}
-
-}
diff --git a/public/css/page/index.css b/public/css/page/index.css
index d91183e..9104154 100644
--- a/public/css/page/index.css
+++ b/public/css/page/index.css
@@ -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;
-}
diff --git a/public/css/page/subforum.css b/public/css/page/subforum.css
index 079e545..792ddd6 100644
--- a/public/css/page/subforum.css
+++ b/public/css/page/subforum.css
@@ -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;*/
+/*}*/
diff --git a/public/css/page/thread.css b/public/css/page/thread.css
index 14c40df..0551f1b 100644
--- a/public/css/page/thread.css
+++ b/public/css/page/thread.css
@@ -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;
diff --git a/public/css/pda.css b/public/css/pda.css
deleted file mode 100644
index 0aaef50..0000000
--- a/public/css/pda.css
+++ /dev/null
@@ -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;
-}
diff --git a/resources/views/layout/default.blade.php b/resources/views/layout/default.blade.php
index 79fcb56..8994016 100644
--- a/resources/views/layout/default.blade.php
+++ b/resources/views/layout/default.blade.php
@@ -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>
diff --git a/resources/views/partial/header.blade.php b/resources/views/partial/header.blade.php
index 31b9dc5..10fdeeb 100644
--- a/resources/views/partial/header.blade.php
+++ b/resources/views/partial/header.blade.php
@@ -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>