work on mobile site

This commit is contained in:
Andrew Pamment 2018-01-26 08:19:13 +10:00
parent 732055b4a2
commit b6f5623826
6 changed files with 387 additions and 7 deletions

View File

@ -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>

BIN
dist/www-bootstrap/static/header-m.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

View File

@ -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%;
}

View File

@ -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 {

View File

@ -62,6 +62,8 @@
float: left;
display: table-column;
width: 30px;
height: 24px;
background: url('/static/delete.png') no-repeat;
}
.email-view-header {

View File

@ -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);