3 files changed,
109 insertions(+),
41 deletions(-)
M
web/templates/index.html
→
web/templates/index.html
@@ -10,23 +10,23 @@ </head>
<body> <div class="container"> <div class="header sidebyside"> - <div class="nomargin nopadding sidebyside" style="width: 200px;"><h1>Samael</h1><h6>some<br>email</h6></div> - <div class="nomargin nopadding sidebyside" style="width: 200px;"> <form action="." class="pageform" method="get"> - <div class="sidebyside"> - <button onclick="pageUpOrDown(this);"><</button> - <span>Page {{ .Page }} of {{ .TotalPages }}</span> - <button onclick="pageUpOrDown(this);">></button> - </div> - <input type="hidden" id="pageform" name="page" value="{{ .Page }}" /> - <input type="hidden" name="to" value="{{ .ToAddr }}" /> - <input type="hidden" name="from" value="{{ .FromAddr }}" /> - <input type="hidden" name="subject" value="{{ .Subject }}" /> - <input type="hidden" name="date" value="{{ .Date }}"/> - </form></div> - <div class="nomargin nopadding" style="width: calc(100% - 400px);"> - <center><input autocomplete="off" style="width: 100%; max-width: 800px;" id="q" name="q" type="text" onchange="SearchInbox()" placeholder="Search Mail"></center> + <div class="nomargin nopadding sidebyside" style="width: fit-content;"> + <h1>Samael</h1><h6>some<br>email</h6> </div> - <div class="nomargin nopadding sidebyside rightdiv" style="width: 200px;"> + <form style="width: fit-content;display: flex;align-content: center;align-items: center;margin: 0 0 0 auto;" action="." method="get" class="sidebyside"> + <button onclick="pageUpOrDown(this);"><</button> + <span style="text-wrap: nowrap;">Page {{ .Page }} of {{ .TotalPages }}</span> + <button onclick="pageUpOrDown(this);">></button> + <input type="hidden" id="pageform" name="page" value="{{ .Page }}" /> + <input type="hidden" name="to" value="{{ .ToAddr }}" /> + <input type="hidden" name="from" value="{{ .FromAddr }}" /> + <input type="hidden" name="subject" value="{{ .Subject }}" /> + <input type="hidden" name="date" value="{{ .Date }}"/> + </form> + <div style="width: calc(100% - 400px);display: flex;margin: 0 0 0 5%;max-width: 120ch;" class="nopadding"> + <input autocomplete="off" style="width: 100%; " id="q" name="q" type="text" onchange="SearchInbox()" placeholder="Search Mail"> + </div> + <div style="width: fit-content;margin: 0 0 0 auto;" class="nopadding sidebyside rightdiv"> <button onclick="ToggleSend()">Compose</button> </div> </div>
M
web/templates/style.css
→
web/templates/style.css
@@ -1,3 +1,64 @@
+:root{ + color:white; + background: #262833; + @media (min-width: 2000px){ + font-size: 110%; + --zoom: 1.33; + } + @media (max-width: 2000px) and (min-width: 1500px) { + font-size: 100%; + --zoom: 1.2; + } + @media (max-width: 1500px) and (min-width: 1400px) { + font-size: 90%; + --zoom: 1.1; + } + @media (max-width: 1400px) and (min-width: 1300px) { + font-size: 85%; + --zoom: 1; + } + @media (max-width: 1300px) and (min-width: 1200px) { + font-size: 80%; + --zoom: 0.9; + } + @media (max-width: 1200px) and (min-width: 1000px) { + font-size: 75%; + --zoom: 0.8; + } + @media (max-width: 1000px) and (min-width: 900px) { + font-size: 70%; + --zoom: 0.7; + } + @media (max-width: 900px) and (min-width: 800px) { + font-size: 65%; + --zoom: 0.625; + } + @media (max-width: 800px) and (min-width: 700px) { + font-size: 60%; + --zoom: 0.55; + } + @media (max-width: 700px) and (min-width: 600px) { + font-size: 55%; + --zoom: 0.475; + } + @media (max-width: 600px) and (min-width: 500px) { + font-size: 50%; + --zoom: 0.4; + } + @media (max-width: 500px) and (min-width: 400px) { + font-size: 45%; + --zoom: 0.35; + } + @media (max-width: 400px) and (min-width: 300px) { + font-size: 35%; + --zoom: 0.3; + } + @media (max-width: 300px) { + font-size: 30%; + --zoom: 0.25; + } + +} .container { position: fixed; left: 50%;@@ -6,10 +67,10 @@ display: flex;
flex-direction: column; height: calc( 100% - 5lh ); width: calc( 100% - 1lh ); - min-width: 550px; + /*min-width: 550px;*/ } #contentframe { - zoom: 1.33; + zoom: var(--zoom); } iframe, .divframe { border: 0;@@ -37,8 +98,8 @@ .inbox-to, .inbox-date {
text-align: right; } .inbox-date, .inbox-from, .inbox-to, .inbox-subject { - margin: 0 10px; - padding: 0 10px; + margin: 0 0.6rem; + padding: 0 0.6rem; } .inbox-subject { color: #999999;@@ -50,8 +111,8 @@ .nopadding {
padding: 0!important; } label{ - font-size: 16px; - margin: 5px; + font-size: 1rem; + margin: 0.3rem; } .topin { border-bottom-left-radius: 0 !important;@@ -82,14 +143,14 @@
} input[type="text"], .inputlike { background-color: #353545; - border: 3px solid transparent; + border: 0.2rem solid transparent; color: #dddddd; - font-size: 16px; - border-radius: 10px; + font-size: 1rem; + border-radius: 0.6rem; line-height: normal; - padding: 5px; + padding: 0.3rem; outline: none; - margin: 5px; + margin: 0.3rem; width: 100%; } textarea {@@ -107,6 +168,12 @@ padding: 0.5lh 0;
margin: 0 0 -1ch 0; border-bottom: #666 solid 1px; } +.header>:first-child { + border-right: 2ch solid transparent; +} +.header > :last-child { + border-left: 2ch solid transparent; +} .sidebyside { display: flex; flex-direction: row;@@ -121,7 +188,7 @@ align-items: center;
} .coldiv { margin: 0; - padding: 0 15px; + padding: 0 0.9rem; display: flex; flex-direction: column; justify-content: center;@@ -133,19 +200,19 @@ padding: 0;
height: calc(100% - 2lh); } li { - margin: 5px; - padding: 5px; + margin: 0.3rem; + padding: 0.3rem; } h1 { font-size: 160%; font-weight: 100; - margin: 0 0 0 5px; + margin: 0 0 0 0.3rem; padding: 0; display: flex; align-items: center; } h6 { - margin: 0 0 0 3px; + margin: 0 0 0 0.2rem; padding: 0; font-size: small; }@@ -188,8 +255,8 @@ }
button:hover { color: #fff; background-color: #131419; - box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 15px; - transform: translateY(-2px); + box-shadow: rgba(0, 0, 0, 0.5) 0.5rem 0.5rem 0.9rem; + transform: translateY(-0.2em); } button:active {@@ -200,16 +267,16 @@
button, .buttonlike { appearance: none; background-color: rgba(0, 0, 0, 0.25); - border: 3px solid transparent; - border-radius: 10px; + border: 0.2rem solid transparent; + border-radius: 0.6rem; box-sizing: border-box; color: #ffffff; cursor: pointer; - font-size: 16px; + font-size: 1rem; line-height: normal; - padding: 5px 10px; + padding: 0.3rem 0.6rem; outline: none; - margin: 5px; + margin: 0.3rem; width: unset; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);@@ -225,6 +292,9 @@ flex-direction: row;
width: 100%; align-items: center; align-content: space-between; +} +.inbox-entry { + overflow: clip; } .inbox-entry p { padding: 0;
M
web/web.go
→
web/web.go
@@ -197,9 +197,7 @@ p.AllowAttrs("href", "target").OnElements("a")
p.AllowTables() p.AllowLists() p.AllowElements("table", "thead", "tbody", "tfoot", "th", "tr", "td", "ul", "ol", "li", "dl", "dt", "dd", "style", "a", "img", "iframe", "video", "audio") - // p.AllowAttrs("type").OnElements("style") p.AllowElements("div", "section", "span", "p", "br", "hr", "b", "i", "u", "strong", "em", "h1", "h2", "h3", "h4", "h5", "h6", "pre", "code", "blockquote") - // p.SkipElementsContent("script") p.AllowRelativeURLs(true) p.RewriteSrc(func(src *url.URL) { if _, err = os.Stat(filepath.Join(db.SAVEPATH, id, src.Path)); err == nil && strings.HasPrefix(mime.TypeByExtension(filepath.Ext(src.Path)), "image") {