Cosmetic changes
This commit is contained in:
Feufochmar
parent
86a84b287b
commit
8a7bf8cf21
193
apmail.css
193
apmail.css
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
body {
|
||||
background: hsl(240, 10%, 40%);
|
||||
margin-left: 1.5%;
|
||||
margin-right: 1.5%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
color: hsl(240, 10%, 15%);
|
||||
border-color: hsl(240, 10%, 15%);
|
||||
|
|
@ -11,8 +11,24 @@ body {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
width: 99vw;
|
||||
height: 99vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* column class */
|
||||
.column {
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
margin: 0.1em;
|
||||
width: 12em;
|
||||
min-width: 12em;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* navigation column */
|
||||
nav {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -22,6 +38,10 @@ nav {
|
|||
align-items: stretch;
|
||||
}
|
||||
|
||||
nav.column {
|
||||
background-color: hsl(240, 10%, 40%);
|
||||
}
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -31,34 +51,90 @@ nav {
|
|||
}
|
||||
|
||||
.page-label {
|
||||
padding: 0;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
background-color: hsl(240, 10%, 65%);
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-label:hover {
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
.page:hover+label {
|
||||
background-color: hsl(240, 10%, 85%);
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 0;
|
||||
#error {
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
background-color: hsl(0, 60%, 85%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Main area column */
|
||||
#main-content {
|
||||
overflow: scroll;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0;
|
||||
background-color: hsl(0, 40%, 85%);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
/* Timeline column */
|
||||
#timeline-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-prev-next {
|
||||
padding: 0.2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
#timeline-data {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
section.timeline-activity {
|
||||
display: block;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
section.timeline-activity:hover {
|
||||
background-color: hsl(240, 10%, 85%);
|
||||
}
|
||||
|
||||
/* Other */
|
||||
a:link {
|
||||
color: hsl(220, 100%, 40%);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: hsl(280, 100%, 40%);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: hsl(220, 100%, 90%);
|
||||
text-shadow: 2px 0px 1px hsl(220, 100%, 30%), -2px 0px 1px hsl(220, 100%, 30%), 0px 2px 1px hsl(220, 100%, 30%), 0px -2px 1px hsl(220, 100%, 30%),
|
||||
1px 1px 0px hsl(220, 100%, 30%), 1px -1px 0px hsl(220, 100%, 30%), -1px 1px 0px hsl(220, 100%, 30%), -1px -1px 0px hsl(220, 100%, 30%);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -89,60 +165,6 @@ h6 {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: hsl(240, 10%, 85%);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: hsl(240, 10%, 85%);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.timeline-prev-next {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
/* Other */
|
||||
a:link {
|
||||
color: hsl(220, 100%, 40%);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: hsl(280, 100%, 40%);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: hsl(220, 100%, 90%);
|
||||
text-shadow: 2px 0px 1px hsl(220, 100%, 30%), -2px 0px 1px hsl(220, 100%, 30%), 0px 2px 1px hsl(220, 100%, 30%), 0px -2px 1px hsl(220, 100%, 30%),
|
||||
1px 1px 0px hsl(220, 100%, 30%), 1px -1px 0px hsl(220, 100%, 30%), -1px 1px 0px hsl(220, 100%, 30%), -1px -1px 0px hsl(220, 100%, 30%);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
}
|
||||
|
||||
/* Page specific */
|
||||
ul.recipient-list {
|
||||
padding: 0;
|
||||
|
|
@ -150,38 +172,15 @@ ul.recipient-list {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
li.actor-display {
|
||||
.actor-display {
|
||||
display: inline-block;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
padding: 0.1em;
|
||||
margin: 0;
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
}
|
||||
|
||||
section.timeline-activity {
|
||||
display: block;
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
margin-top: 0.1em;
|
||||
margin-bottom: 0.1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
section.timeline-activity:hover {
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
}
|
||||
|
||||
section.actor-display {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0.1em;
|
||||
margin-left: 0.2em;
|
||||
margin-right: 0.2em;
|
||||
background-color: hsl(240, 10%, 75%);
|
||||
margin-left: 0.1em;
|
||||
margin-right: 0.1em;
|
||||
background-color: hsl(240, 10%, 85%);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
28
index.html
28
index.html
|
|
@ -8,10 +8,11 @@
|
|||
<script src="render.js"></script>
|
||||
</head>
|
||||
<body onload="UI.checkConnection()">
|
||||
<nav id="tab-bar">
|
||||
<!-- Navigation column -->
|
||||
<nav id="tab-bar" class="column">
|
||||
<!-- Send page tab -->
|
||||
<input type="radio" id="send-selector" class="page" name="page" value="send" checked onchange="UI.setContext('send-message')" />
|
||||
<label for="send-selector" class="page-label" id="send-selector-label">Send Message</label>
|
||||
<label for="send-selector" class="page-label" id="send-selector-label">Write Note</label>
|
||||
<!-- Inbox tab -->
|
||||
<input type="radio" id="inbox-selector" class="page" name="page" value="inbox" onchange="UI.setContext('my-inbox')" />
|
||||
<label for="inbox-selector" class="page-label" id="inbox-selector-label">My Inbox</label>
|
||||
|
|
@ -24,28 +25,27 @@
|
|||
<!-- Lookup user box -->
|
||||
<nav class="page-label">
|
||||
<label for="lookup-actor" id="lookup-actor-label">Lookup Actor</label>
|
||||
<input id="lookup-actor" type="text" placeholder="name@server"/>
|
||||
<input id="lookup-actor" type="text" placeholder="name@server" />
|
||||
<button onclick="UI.lookupActor()">Search</button>
|
||||
</nav>
|
||||
<!-- To display errors -->
|
||||
<section id="error">
|
||||
<span id="content-error"></span><br/>
|
||||
<button onclick="UI.clearError();">×</button>
|
||||
</section>
|
||||
</nav>
|
||||
<!-- Timelines -->
|
||||
<section id="timeline" style="display:none;">
|
||||
<section id="timeline-error" class="error"></section>
|
||||
<section class="timeline">
|
||||
<section id="timeline-column" class="column">
|
||||
<section class="timeline-prev-next">
|
||||
<button id="timeline-prev-top" onclick="UI.prevTimeline();">Previous</button>
|
||||
<button id="timeline-next-top" onclick="UI.nextTimeline();">Next</button>
|
||||
</section>
|
||||
<section id="timeline-data"></section>
|
||||
<section class="timeline-prev-next">
|
||||
<button id="timeline-prev-bottom" onclick="UI.prevTimeline();">Previous</button>
|
||||
<button id="timeline-next-bottom" onclick="UI.nextTimeline();">Next</button>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<!-- Content pages -->
|
||||
<section id="main-content">
|
||||
<section id="content-error" class="error"></section>
|
||||
<section id="main-content" class="column">
|
||||
<!-- Account selection page -->
|
||||
<main id="select-user" style="display:none;">
|
||||
<h2>Connection</h2>
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
</section>
|
||||
<details>
|
||||
<summary>Show source</summary>
|
||||
<textarea rows="30" cols="120" readonly id="profile-code-source">
|
||||
<textarea rows="30" cols="80" readonly id="profile-code-source">
|
||||
</textarea>
|
||||
</details>
|
||||
</main>
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
<p>Cc: <ul id="activity-cc" class="recipient-list"></ul></p>
|
||||
<details>
|
||||
<summary>Show source</summary>
|
||||
<textarea rows="30" cols="120" readonly id="activity-code-source">
|
||||
<textarea rows="30" cols="80" readonly id="activity-code-source">
|
||||
</textarea>
|
||||
</details>
|
||||
</details>
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
</details>
|
||||
<details>
|
||||
<summary>Show source</summary>
|
||||
<textarea rows="30" cols="120" readonly id="activity-object-code-source">
|
||||
<textarea rows="30" cols="80" readonly id="activity-object-code-source">
|
||||
</textarea>
|
||||
</details>
|
||||
</section>
|
||||
|
|
|
|||
57
render.js
57
render.js
|
|
@ -18,7 +18,7 @@ const Icons = {
|
|||
const Render = {
|
||||
// Render an actor in audience fields context
|
||||
audienceActor: function(actor) {
|
||||
var display = '<section class="actor-display">'
|
||||
var display = '<section style="display:inline-block;">'
|
||||
if (actor.valid) {
|
||||
const icon = actor.info.icon ? actor.info.icon : Icons['unknown-user']
|
||||
display = display + '<img src="' + icon + '" width="32" height="32" /> '
|
||||
|
|
@ -105,7 +105,7 @@ const UI = {
|
|||
if (UI.other_actor.urls.outbox) {
|
||||
UI.showTimeline(UI.other_actor.urls.outbox, undefined)
|
||||
} else {
|
||||
UI.displayContentError('Actor does not have a public outbox.')
|
||||
UI.displayError('Actor does not have a public outbox.')
|
||||
UI.showTimeline(undefined, undefined)
|
||||
}
|
||||
}
|
||||
|
|
@ -190,11 +190,17 @@ const UI = {
|
|||
// TO/CC
|
||||
Elem('send-message-to').innerHTML = UI.composed_message.to.map(
|
||||
function(element) {
|
||||
return '<li class="actor-display">' + Render.audienceActor(element) + ' <button onclick="UI.removeToRecipient(\'' + element.urls.profile + '\')">×</button></li>'
|
||||
return '<li class="actor-display">'
|
||||
+ Render.audienceActor(element)
|
||||
+ ' <button style="vertical-align:top;" onclick="UI.removeToRecipient(\'' + element.urls.profile + '\')">×</button>'
|
||||
+ '</li>'
|
||||
}).join('')
|
||||
Elem('send-message-cc').innerHTML = UI.composed_message.cc.map(
|
||||
function(element) {
|
||||
return '<li class="actor-display">' + Render.audienceActor(element) + ' <button onclick="UI.removeCcRecipient(\'' + element.urls.profile + '\')">×</button></li>'
|
||||
return '<li class="actor-display">'
|
||||
+ Render.audienceActor(element)
|
||||
+ ' <button style="vertical-align:top;" onclick="UI.removeCcRecipient(\'' + element.urls.profile + '\')">×</button>'
|
||||
+ '</li>'
|
||||
}).join('')
|
||||
}
|
||||
},
|
||||
|
|
@ -206,7 +212,7 @@ const UI = {
|
|||
function(load_ok, failure_message) {
|
||||
UI.onConnectionChange(load_ok)
|
||||
if (failure_message) {
|
||||
UI.displayContentError(failure_message)
|
||||
UI.displayError(failure_message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -216,21 +222,14 @@ const UI = {
|
|||
UI.refresh_context[UI.current_context]()
|
||||
},
|
||||
// Display content errors
|
||||
displayContentError: function(message) {
|
||||
Elem('content-error').style.display = 'block'
|
||||
Elem('content-error').innerText = 'Error: ' + message
|
||||
},
|
||||
// Display timeline errors
|
||||
displayTimelineError: function(message) {
|
||||
Elem('timeline-error').style.display = 'block'
|
||||
Elem('timeline-error').innerText = 'Error: ' + message
|
||||
displayError: function(message) {
|
||||
Elem('error').style.display = 'block'
|
||||
Elem('content-error').innerText = message
|
||||
},
|
||||
// Clear error messages
|
||||
clearError: function() {
|
||||
Elem('content-error').style.display = 'none'
|
||||
Elem('error').style.display = 'none'
|
||||
Elem('content-error').innerText = ''
|
||||
Elem('timeline-error').style.display = 'none'
|
||||
Elem('timeline-error').innerText = ''
|
||||
},
|
||||
// Show a page
|
||||
showPage: function(page, data) {
|
||||
|
|
@ -250,10 +249,8 @@ const UI = {
|
|||
if (url) {
|
||||
Elem('timeline').style.display = 'block'
|
||||
Elem('timeline-data').innerHTML = 'Loading collection...'
|
||||
Elem('timeline-prev-top').style.display = 'none'
|
||||
Elem('timeline-prev-bottom').style.display = 'none'
|
||||
Elem('timeline-next-top').style.display = 'none'
|
||||
Elem('timeline-next-bottom').style.display = 'none'
|
||||
Elem('timeline-prev-top').disabled = true
|
||||
Elem('timeline-next-top').disabled = true
|
||||
UI.timeline = new Timeline()
|
||||
UI.timeline.load(
|
||||
url,
|
||||
|
|
@ -266,15 +263,13 @@ const UI = {
|
|||
+ '<strong>' + activity.actor.displayName() + '</strong></section>'
|
||||
}).join('')
|
||||
if (UI.timeline.prev) {
|
||||
Elem('timeline-prev-top').style.display = 'block'
|
||||
Elem('timeline-prev-bottom').style.display = 'block'
|
||||
Elem('timeline-prev-top').disabled = false
|
||||
}
|
||||
if (UI.timeline.next) {
|
||||
Elem('timeline-next-top').style.display = 'block'
|
||||
Elem('timeline-next-bottom').style.display = 'block'
|
||||
Elem('timeline-next-top').disabled = false
|
||||
}
|
||||
} else {
|
||||
UI.displayTimelineError(failure_message)
|
||||
UI.displayError(failure_message)
|
||||
Elem('timeline-data').innerHTML = ''
|
||||
}
|
||||
})
|
||||
|
|
@ -305,7 +300,7 @@ const UI = {
|
|||
if (load_ok) {
|
||||
UI.setContext('other-profile')
|
||||
} else {
|
||||
UI.displayContentError('Unable to find user (' + failure_message + ')')
|
||||
UI.displayError('Unable to find user (' + failure_message + ')')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -318,7 +313,7 @@ const UI = {
|
|||
if (load_ok) {
|
||||
UI.showPage('ask-password', undefined)
|
||||
} else {
|
||||
UI.displayContentError(failure_message)
|
||||
UI.displayError(failure_message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -330,7 +325,7 @@ const UI = {
|
|||
function(load_ok, failure_message) {
|
||||
UI.onConnectionChange(load_ok)
|
||||
if (failure_message) {
|
||||
UI.displayContentError(failure_message)
|
||||
UI.displayError(failure_message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -349,7 +344,7 @@ const UI = {
|
|||
UI.composed_message.addToRecipient(actor)
|
||||
UI.showPage('send-message', undefined)
|
||||
} else {
|
||||
UI.displayContentError('Unable to find user (' + failure_message + ')')
|
||||
UI.displayError('Unable to find user (' + failure_message + ')')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -363,7 +358,7 @@ const UI = {
|
|||
UI.composed_message.addCcRecipient(actor)
|
||||
UI.showPage('send-message', undefined)
|
||||
} else {
|
||||
UI.displayContentError('Unable to find user (' + failure_message + ')')
|
||||
UI.displayError('Unable to find user (' + failure_message + ')')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -394,7 +389,7 @@ const UI = {
|
|||
if (is_ok) {
|
||||
UI.showPage('send-message', undefined)
|
||||
} else {
|
||||
UI.displayContentError('Error when sending message: ' + failure_message)
|
||||
UI.displayError('Error when sending message: ' + failure_message)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue