That proved a little more convoluted than expected, but now works well.

This commit is contained in:
simon 2016-08-21 12:19:54 +01:00
parent 06773bd6f7
commit ebfefd3edb
6 changed files with 390 additions and 56 deletions

View file

@ -57,4 +57,4 @@ Alternatively, if you want to deploy to a servlet container (which I would stron
## Editing the framing content
You can edit the [[\_left-bar]], the [[\_edit-left-bar]], and the [[\_header]].
You can edit the [stylesheet](/edit-css?page=stylesheet), the [[\_left-bar]], the [[\_edit-left-bar]], and the [[\_header]].

View file

@ -0,0 +1,296 @@
/*
## Smeagol: a very simple Wiki engine
## Copyright and licence
Copyright (C) 2014 Simon Brooke
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
USA.
# The Stylesheet
*/
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
/* ids generally in document order */
/* top-of-page navigation, not editable, provided by Smeagol */
#nav{
margin: 0;
padding: 0;
top: 0;
width: 100%;
_position: absolute;
_top: expression(document.documentElement.scrollTop);
z-index: 149;
background:rgba(40,40,40,0.8);
}
#user {
font-height: 66%;
float: right;
padding: 0.1em 0.75em;
margin: 0;
color: white;
}
#user a {
color: silver;
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav-menu {
margin: 0;
padding: 0;
}
#nav ul li {
padding: 0;
margin: 0;
display: inline;
}
#nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
/* Overall container div, holds all content of page. Yes, I know it shouldn't have fixed width */
#main-container{
}
/* header for all pages in the Wiki - editable, provided by users. Within main-container */
#header {
margin-top: 0;
width:100%;
background-color: gray;
color: white;
}
#header h1 {
margin-top: 0;
}
/* left bar for all pages in the Wiki - editable, provided by users. Within main-container */
#left-bar {
width: 17%;
height: 100%;
float: left;
}
/* content of the current in the Wiki - editable, provided by users. Within main-container */
#content {
border: thin solid silver;
width: 80%;
float: right;
padding-bottom: 5em;
}
/* cookies information box, fixed, in right margin, just above footer */
#cookies {
width: 30%;
float: right;
position: fixed;
bottom: 1.5em;
right: 0;
z-index: 150;
background: transparent;
}
/* about-cookies box: permanently visible part of cookies information box */
#about-cookies {
clear: right;
width: 10em;
font-size: 66%;
float: right;
text-align: right;
padding: 0.25em 2em;
color: white;
background:rgba(40,40,40,0.8);
}
/* more-about-cookies box, normally hidden */
#more-about-cookies {
display: none;
padding: 0.25em 2em;
color: white;
background:rgba(40,40,40,0.8);
border-bottom: thin solid white;
}
/* but magically appears on mouseover */
#cookies:hover #more-about-cookies {
display: block;
}
/* footer of the page - not-editable, provided by Smeagol */
#footer {
clear: both;
font-size: smaller;
text-align: center;
color:white;
background:rgba(128,128,128,0.95);
width: 100%;
margin: 0;
padding: 0.25em 0;
bottom:0;
position:fixed;
vertical-align: top;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
}
.change {
background-color: rgb( 223, 223, 223);
border: thin solid silver;
}
.error {
width: 100%;
background-color: red;
color: white;
}
.message {
border: thin solid red;
}
.minor-controls {
list-style: none;
float: right;
padding: 0.25em 2em;
color: white;
background:rgba(40,40,40,0.8);
font-size: 66%;
}
.minor-controls li {
display: inline;
}
.minor-controls a {
float: right;
padding: 0.25em 2em;
color: white;
}
.warn {
color: maroon;
}
.widget {
background-color: silver;
border: thin solid white;
margin-top: 0;
margin-bottom: 0;
width: 100%;
}
.wiki {
margin: 0;
}
form {
border: thin solid silver;
}
del {
color: red;
}
div.content, form, p, pre, h1, h2, h3, h4, h5 {
padding: 0.25em 5%;
}
dl, menu, ol, table, ul {
margin: 0.25em 5%;
}
input {
background-color: white;
}
input.action {
background-color: green;
}
input.action-dangerous {
color: white;
background-color: red;
}
input.required:after {
content: " \*";
color: red;
}
ins {
color: green;
}
label {
width: 20%;
min-width: 20em;
border-right: thin solid gray;
}
menu li {
display: inline;
}
menu li::before {
content: "|| ";
}
table {
border: 2px solid black;
border-collapse: collapse;
}
table.music-ruled tr:nth-child(odd) {
background-color: silver;
}
th, td {
text-align: left;
vertical-align: top;
padding: 0.15em 1.5em;
border: 1px solid gray;
}
th {
background-color: silver;
}

View file

@ -3,11 +3,8 @@
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="{{servlet-context}}/css/phone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/tablet.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/standard.css" media="screen and (min-device-width: 1025px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/content/stylesheet.css" media="screen and (min-device-width: 1025px)" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/print.css" media="print" rel="stylesheet" type="text/css" />
<link href="{{servlet-context}}/css/states.css" rel="stylesheet" type="text/css" />
{% block extra-headers %}
{% endblock %}
</head>
@ -22,7 +19,6 @@
<img id="nav-icon" src="{{servlet-context}}/img/threelines.png" alt="Menu"/>
<ul id="nav-menu" class="nav">
<li class="{{wiki-selected}}"><a href="{{servlet-context}}/">Home</a></li>
<li class="{{edit-selected}}"><a href="{{servlet-context}}/edit?page={{title}}">Edit this page</a></li>
<li class="{{auth-selected}}"><a href="{{servlet-context}}/auth">
{% if user %}
Log out
@ -39,31 +35,30 @@
</div>
<div id="main-container" class="container">
{% if message %}
<div id="message">
<p class="message">{{message}}</p>
</div>
{% endif %}
{% if error %}
<div id="error">
<p class="error">{{error}}</p>
</div>
{% endif %}
{% if message %}
<div id="message">
<p class="message">{{message}}</p>
</div>
{% endif %}
{% if error %}
<div id="error">
<p class="error">{{error}}</p>
</div>
{% endif %}
{% block content %}
{% endblock %}
{% block content %}
{% endblock %}
</div>
<div id="cookies">
<div id="more-about-cookies">
This website stores session information as a 'cookie' on your browser. This helps us show you the content
you want to see. This cookie does not identify you, and cannot be read by other websites. It is deleted by
your browser as soon as you leave this site. This website does not use any third party cookies, so your
visit here cannot be tracked by other websites.
</div>
<div id="about-cookies">
About cookies
</div>
<div id="more-about-cookies">
This website stores session information as a 'cookie' on your browser. This helps us show you the content
you want to see. This cookie does not identify you, and cannot be read by other websites. It is deleted by
your browser as soon as you leave this site. This website does not use any third party cookies, so your
visit here cannot be tracked by other websites.
</div>
<div id="about-cookies">
About cookies
</div>
</div>
<div id="footer">
<div id="credits">

View file

@ -0,0 +1,22 @@
{% extends "templates/base.html" %}
{% block content %}
<div id="content" class="edit">
<form action="{{servlet-context}}/edit-css" method="POST">
<input type="hidden" name="page" value="{{page}}"/>
<textarea name="src" id="src" rows="25" cols="80">{{content}}</textarea>
<p class="widget">
<label for="summary">What have you changed?</label>
<input name="summary" id="summary" type="text"
value="{%if exists%}{%else%}New file {{title}}{%endif%}" required/>
</p>
<p class="widget">
<label for="submit">When you have finished editing</label>
<input name="submit" id="submit" type="submit" class="action" value="Save!"/>
</p>
</form>
</div>
<script>
var simplemde = new SimpleMDE();
</script>
{% endblock %}

View file

@ -1,9 +1,11 @@
{% extends "templates/base.html" %}
{% block content %}
<div id="content" class="wiki">
<div class="minor-controls">
<a href="history?page={{page}}">History</a>
</div>
<ul class="minor-controls">
<li><a href="{{servlet-context}}/edit?page={{title}}">Edit this page</a></li>
<li><a href="history?page={{page}}">History</a></li>
</ul>
{{content|safe}}
</div>
{% endblock %}