From b6f5623826e94b7b45bef2ab98febdc1d306c4d2 Mon Sep 17 00:00:00 2001
From: Andrew Pamment <apamment@yandex.com>
Date: Fri, 26 Jan 2018 08:19:13 +1000
Subject: [PATCH] work on mobile site

---
 dist/www-bootstrap/header.tpl              |  12 +-
 dist/www-bootstrap/static/header-m.png     | Bin 0 -> 4239 bytes
 dist/www-bootstrap/static/style-mobile.css | 370 +++++++++++++++++++++
 dist/www-bootstrap/static/style.css        |   6 +-
 dist/www/static/style.css                  |   2 +
 src/www_email.c                            |   4 +-
 6 files changed, 387 insertions(+), 7 deletions(-)
 create mode 100644 dist/www-bootstrap/static/header-m.png
 create mode 100644 dist/www-bootstrap/static/style-mobile.css

diff --git a/dist/www-bootstrap/header.tpl b/dist/www-bootstrap/header.tpl
index 38d8d2d..a2db158 100644
--- a/dist/www-bootstrap/header.tpl
+++ b/dist/www-bootstrap/header.tpl
@@ -12,7 +12,8 @@
 
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link rel="stylesheet" href="@@WWW_URL@@static/style.css">
+    <link rel="stylesheet" media="(max-width: 767px)" href="@@WWW_URL@@static/style-mobile.css">
+    <link rel="stylesheet" media="(min-width: 768px)" href="@@WWW_URL@@static/style.css">
     <!-- Custom styles for this template -->
     <style>
       body {
@@ -48,7 +49,14 @@
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
       <div class="container">
-        <a class="navbar-brand" href="@@WWW_URL@@"><img class="img-responsive2" src="@@WWW_URL@@static/header.png" /></a>
+        <a class="navbar-brand" href="@@WWW_URL@@">
+        <picture>
+			    <source srcset="@@WWW_URL@@static/header-m.png" media="(max-width: 767px)">
+			    <source srcset="@@WWW_URL@@static/header.png">
+			    <img src="@@WWW_URL@@static/header.png" alt="Magicka BBS" />
+		    </picture>	
+
+        </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
diff --git a/dist/www-bootstrap/static/header-m.png b/dist/www-bootstrap/static/header-m.png
new file mode 100644
index 0000000000000000000000000000000000000000..93222e6967befb9b076ed9f63cf549df2ee4a198
GIT binary patch
literal 4239
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

literal 0
HcmV?d00001

diff --git a/dist/www-bootstrap/static/style-mobile.css b/dist/www-bootstrap/static/style-mobile.css
new file mode 100644
index 0000000..c11d9fd
--- /dev/null
+++ b/dist/www-bootstrap/static/style-mobile.css
@@ -0,0 +1,370 @@
+@font-face {
+    font-family: 'pxplus_ibm_vga8regular';
+    src: url('/static/fonts/pxplus_ibm_vga8-webfont.woff2') format('woff2'),
+		 url('static/fonts/pxplus_ibm_vga8-webfont.svg') format('svg'),
+         url('/static/fonts/pxplus_ibm_vga8-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+.navbar-brand img {
+  max-width: 200px;
+}
+
+.footer {
+	font-size: small;
+}
+
+.div-table {
+	background-color: #eee;
+	border: 1px solid #666666;
+	border-spacing: 5px;
+}
+
+.email-summary-seen {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+	background-color: #eee;
+}
+
+.email-summary {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+	background-color: #b2ffb0;
+}
+
+.email-id {
+  font-weight: bold;
+  float: left;
+  width: 15px;
+  padding-left: 5px;
+}
+
+.email-subject {
+  float: left;
+  font-size: large;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+
+
+}
+
+.email-from {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.email-date {
+  font-size: small;
+  font-weight: bold;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 80%;
+    flex: 0 0 80%;
+    max-width: 80%;
+
+}
+
+.email-delete {
+  float: right;
+  position: relative;
+  width: 24px;
+  min-height: 24px;
+  top: -24px;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  background: url('/static/delete.png');
+}
+
+.email-view-header {
+	background-color: #eee;
+	border: 1px solid #666666;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.email-view-subject {
+	font-size: xx-large;
+}
+
+.email-view-from {
+	color: #222;
+}
+
+.email-view-date {
+	color: #222;
+}
+
+.conference-list-item {
+    background-color: #333333;
+    color: white;
+    padding: 5px;
+}
+
+.area-list-item {
+	padding: 5px 0 5px 15px;
+}
+
+.area-list-new {
+	padding: 5px 0 5px 15px;
+	background-color: #b2ffb0;	
+}
+
+.msg-summary-seen {
+        background-color: #eee;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+}
+
+.msg-summary {
+	background-color: #b2ffb0;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+}
+.msg-summary-id {
+  font-size: xx-small;
+  font-weight: bold;
+  float: left;
+  width: 15px;
+  padding-left: 2px;
+}
+
+.msg-summary-subject {
+  float: left;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-from {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-to {
+  float: left;
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+}
+
+.msg-summary-date {
+  font-size: small;
+  font-weight: bold;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 30px;
+  padding-left: 30px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 80%;
+    flex: 0 0 80%;
+    max-width: 80%;
+
+}
+
+.msg-view-header {
+	background-color: #eee;
+	border: 1px solid #666666;
+	padding: 5px;
+	margin-bottom: 10px;
+}
+
+.msg-view-subject {
+	font-size: xx-large;
+}
+
+.msg-view-from {
+	color: #222;
+}
+
+.msg-view-to {
+	color: #222;
+}
+
+.msg-view-date {
+	color: #222;
+}
+
+.menu ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333333;
+}
+
+.menu li {
+    float: left;
+}
+
+.menu li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+}
+
+.menu li a:hover {
+    background-color: #111111;
+}
+
+.email-reply-form {
+	margin-left: 20px;
+}
+.button {
+	padding-bottom:10px;
+}
+.button a {
+	width: auto;
+	padding: 5px;
+	color: white;
+	background-color: #333;
+	text-decoration: none;
+}
+
+.button a:hover {
+	background-color: #111111;
+}
+
+.last10-row {
+	background-color: #eee;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+}
+
+.last10-name {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.last10-location {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+.last10-date {
+  font-size: small;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+
+    -webkit-box-flex: 0;
+    -ms-flex: 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+}
+
+#msgbody {
+	background-color: black;
+  color: gray;
+  font-size: xx-small;
+	font-family: 'pxplus_ibm_vga8regular';
+	line-height: 1;
+  padding: 5px;
+  overflow-x: scroll;
+}
+
+.msg-reply-form {
+  max-width: 100%;
+}
+
+.msg-reply-form textarea {
+  padding: 0px;
+  max-width: 100%;
+}
+
+.email-reply-form {
+  max-width: 100%;
+}
+
+.email-reply-form textarea {
+  padding: 0px;
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/dist/www-bootstrap/static/style.css b/dist/www-bootstrap/static/style.css
index b9ded1b..1b8ee14 100644
--- a/dist/www-bootstrap/static/style.css
+++ b/dist/www-bootstrap/static/style.css
@@ -93,8 +93,8 @@
 
 .email-delete {
   position: relative;
-  width: 100%;
-  min-height: 1px;
+  width: 24px;
+  min-height: 24px;
   padding-right: 15px;
   padding-left: 15px;
 
@@ -102,7 +102,7 @@
     -ms-flex: 0 0 5%;
     flex: 0 0 5%;
     max-width: 5%;
-
+    background: url('/static/delete.png') no-repeat;
 }
 
 .email-view-header {
diff --git a/dist/www/static/style.css b/dist/www/static/style.css
index caf319c..bf70051 100644
--- a/dist/www/static/style.css
+++ b/dist/www/static/style.css
@@ -62,6 +62,8 @@
 	float: left;
 	display: table-column;
 	width: 30px;
+	height: 24px;
+	background: url('/static/delete.png') no-repeat;
 }
 
 .email-view-header {
diff --git a/src/www_email.c b/src/www_email.c
index 3d7959a..b64783f 100644
--- a/src/www_email.c
+++ b/src/www_email.c
@@ -618,7 +618,7 @@ sqlite3_busy_timeout(db, 5000);
 		date = (time_t)sqlite3_column_int(res, 4);
 		localtime_r(&date, &msg_date);
 		if (seen == 0) {
-			sprintf(buffer, "<div class=\"email-summary\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><div class=\"email-delete\"><a href=\"%semail/delete/%d\"><img src=\"%sstatic/delete.png\" alt=\"delete\" /></a></div></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id, conf.www_url);
+			sprintf(buffer, "<div class=\"email-summary\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><a href=\"%semail/delete/%d\"><div class=\"email-delete\"></div></a></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id);
 			if (len + strlen(buffer) > max_len - 1) {
 				max_len += 4096;
 				page = (char *)realloc(page, max_len);
@@ -626,7 +626,7 @@ sqlite3_busy_timeout(db, 5000);
 			strcat(page, buffer);
 			len += strlen(buffer);
 		} else {
-			sprintf(buffer, "<div class=\"email-summary-seen\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><div class=\"email-delete\"><a href=\"%semail/delete/%d\"><img src=\"%sstatic/delete.png\" alt=\"delete\" /></a></div></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id, conf.www_url);
+			sprintf(buffer, "<div class=\"email-summary-seen\"><div class=\"email-id\">%d</div><div class=\"email-subject\"><a href=\"%semail/%d\">%s</a></div><div class=\"email-from\">%s</div><div class=\"email-date\">%.2d:%.2d %.2d-%.2d-%.2d</div><a href=\"%semail/delete/%d\"><div class=\"email-delete\"></div></a></div>\n", msgid + 1, conf.www_url, msgid + 1, subject, from, msg_date.tm_hour, msg_date.tm_min, msg_date.tm_mday, msg_date.tm_mon + 1, msg_date.tm_year - 100, conf.www_url, id);
 			if (len + strlen(buffer) > max_len - 1) {
 				max_len += 4096;
 				page = (char *)realloc(page, max_len);