From bb7613359ac3aeb759ea742a899d5c746a1e9a62 Mon Sep 17 00:00:00 2001 From: Chris Date: Wed, 22 Nov 2023 09:56:35 +0100 Subject: [PATCH] updated navbar to auto collapse on smaller devices --- CHANGELOG.md | 3 + web/css/opentrashmail.css | 52 ++++++- web/js/opentrashmail.js | 260 +---------------------------------- web/templates/index.html.php | 20 +-- 4 files changed, 70 insertions(+), 265 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 02001d4..8e448ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## V1.1.6 +- Reworked the navbar header to look better on smaller screens + ## V1.1.5 - Added support for plaintext file attachments - Updated the way attachments are stored. Now it's md5 + filename diff --git a/web/css/opentrashmail.css b/web/css/opentrashmail.css index 86d4a1d..12af720 100644 --- a/web/css/opentrashmail.css +++ b/web/css/opentrashmail.css @@ -18,8 +18,8 @@ tr.htmx-swapping td { border-radius: 5px; } -.htmx-indicator{ - display:none; +.htmx-indicator { + display: none; } .text-center { @@ -32,4 +32,52 @@ tr.htmx-swapping td { :root { --form-element-spacing-vertical: 0.15rem; --form-element-spacing-horizontal: 1rem; +} + +/** dynamic nav bar **/ + +.topnav { + overflow: hidden; +} + +.topnav a { + float: left; + display: block; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.topnav .icon { + display: none; +} + +@media screen and (max-width: 775px) { + .topnav a:not(:first-child) { + display: none; + } + + .topnav a.icon { + float: right; + display: block; + } +} + +@media screen and (max-width: 775px) { + .topnav.responsive { + position: relative; + } + + .topnav.responsive a.icon { + position: absolute; + right: 0; + top: 0; + } + + .topnav.responsive a { + float: none; + display: block; + text-align: left; + } } \ No newline at end of file diff --git a/web/js/opentrashmail.js b/web/js/opentrashmail.js index da00f6e..866375a 100644 --- a/web/js/opentrashmail.js +++ b/web/js/opentrashmail.js @@ -1,254 +1,8 @@ - -var domains = []; -var lastid = 0; -var activeemail = ''; -var timer; -$( document ).ready(function() { - - $.ajaxSetup({ cache: false }); - - var email = window.location.hash.substr(1); - if(validateEmail(email)) - loadAccount(email) - - $.get("api.php?a=getdoms",function(data){ - if(data.length>0) - domains = data; - else $("#btn-gen-random").hide(); - },"json") - - $.get("api.php?a=show-list",function(data){ - if (data) - $("#btn-list-addresses").show(); - },"json") -}); - -function loadMail(email,id) -{ - $.get("api.php?a=load&email="+email+"&id="+id,function(data){ - // - if(data.status=="ok") - { - renderEmail(email,id,data.data) - } - },"json") -} - -function renderEmail(email,id,data) -{ - clearInterval(timer); - var btns = '' - for(att in data.parsed.attachments) - { - var filename=data.parsed.attachments[att].substr(14) - btns+=''+filename+'' +function navbarmanager() { + var x = document.getElementById("OTMTopnav"); + if (x.className === "topnav") { + x.className += " responsive"; + } else { + x.className = "topnav"; } - $("#main").html('

'+email+'

\ -
\ - '+(data.parsed.body?'
'+data.parsed.body+'
':'')+' \ - '+(data.parsed.htmlbody?'

HTML view

'+data.parsed.htmlbody+'

':'')+' \ - '+(btns!==''?'

Attachments

'+btns:'')+'\ -
\ -

Raw Email

'+data.raw+'
\ -
\ - ') -} - -function listAddresses(e) -{ - clearInterval(timer); - e = e || window.event; - e.preventDefault(); - - $.get("api.php?a=list-addresses", function(data) { - if (data.status == "ok") { - accounts = data.addresses; - $("#main").html(`

Accounts

-
- `) - } else - alert("Unable to fetch list of accounts") - },"json") -} - -function loadAccount(email) -{ - clearInterval(timer); - if(validateEmail(email)) - { - activeemail = email; - - lastid = 0; - changeHash(email) - $("#main").html('

'+email+'

\ -
RSS feed: '+location.protocol + '//' + location.hostname+'/rss/'+email+'/rss.xml
\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ -
#DateFromSubjectAction
\ - ') - - timer = setInterval(updateEmailTable, 5000); //check for new mail every 5 seconds - updateEmailTable(); //and check now - } - else - { - changeHash("") - } -} - -function updateEmailTable() -{ - var email = activeemail; - var index = 1; - console.log("Checking mail for "+email) - - $.get("api.php?a=list&email="+email+"&lastid="+lastid,function(data){ - if(data.status=="ok") - { - var admin=false; - if(data.type=="admin") - { - clearInterval(timer); - admin = true; - // Do not add the To header if one with the "to" class already exists - if ( $('#tableheader').children(':eq(2)').hasClass("to") === false ) - { - $('#tableheader').children(':eq(1)').after('To'); - } - } - - //$("#emailtable tr").remove(); // Empty all from the table so we don't stack - if(Object.keys(data.emails).length>0) - for(em in data.emails) - { - if($("#nomailyet").length != 0) - $("#nomailyet").remove(); - if(admin===true) - { - //dateofemail=em.split("-")[0]; - email = em.substring(em.indexOf('-') + 1); - } - else dateofemail = em; - if(em>lastid) lastid = em; - - //var date = new Date(parseInt(dateofemail)) - //var datestring = date.getDate()+"."+date.getMonth()+"."+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); - var datestring = moment.unix(parseInt(dateofemail/1000)).format(data.dateformat); // Use moment.js formatting - var ed = data.emails[em] - email = ed.email; - $("#emailtable").append('\ - \ - '+(index++)+'\ - '+datestring+'\ - '+(admin===true?''+email+'':'')+'\ - '+ed.from.toHtmlEntities()+'\ - '+ed.subject.toHtmlEntities()+'\ - \ - '); - } - else if(lastid==0 && $("#nomailyet").length == 0){ - $("#emailtable").append('\ - \ -

No emails received on this address (yet..)

\ - '); - } - } - },"json") -} - -function accessAccount() -{ - var email = $("#email").val() - if(email) - loadAccount(email) - else alert("Enter an email you want to access") -} - -function generateAccount() -{ - if(domains===null) - alert("No domains configured in settings.ini") - else - { - var dom = domains[Math.floor(Math.random()*domains.length)]; - if(dom.includes("*")) - dom = dom.replace("*",adjectivePlease()); - console.log(dom); - var email = makeName()+'@'+dom; - loadAccount(email) - } -} - -function changeHash(val) -{ - if(history.pushState) { - history.pushState(null, null, '#'+val); - } - else { - location.hash = '#'+val; - } -} - -function validateEmail(email) { - var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - return re.test(String(email).toLowerCase()); -} - -/** - * Convert a string to HTML entities - */ -String.prototype.toHtmlEntities = function() { - return this.replace(/./gm, function(s) { - return "&#" + s.charCodeAt(0) + ";"; - }); -}; - -/** - * Create string from HTML entities - */ -String.fromHtmlEntities = function(string) { - return (string+"").replace(/&#\d+;/gm,function(s) { - return String.fromCharCode(s.match(/\d+/gm)[0]); - }) -}; - -$(document).on("click",".deletemailbtn",function(e) { - var btn = $(this); - var email = $(this).parent().parent().attr("email"); - var messageid = $(this).parent().parent().attr("messageid"); - - - if(confirm("Do you really want to delete this email?")) - { - $.get( "api.php?a=del&email="+email+"&mid="+messageid, function( data ) { - console.log(data); - if(data.status=="ok") - btn.parent().parent().fadeOut(); - else alert("Error deleting email: "+data.reason) - },'json'); - } - - e.preventDefault(); -}); - -$(document).on("click",".openmailbtn",function(e) { - var email = $(this).parent().parent().attr("email"); - var messageid = $(this).parent().parent().attr("messageid"); - - loadMail(email,messageid); - - e.preventDefault(); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/web/templates/index.html.php b/web/templates/index.html.php index a41b7c8..e5cdc20 100644 --- a/web/templates/index.html.php +++ b/web/templates/index.html.php @@ -12,16 +12,15 @@ -
- + @@ -30,6 +29,7 @@ +