From 7f6b11a45a479665bcd12a12f04cf416fefb8e97 Mon Sep 17 00:00:00 2001 From: Xuan Sang LE Date: Sun, 25 Feb 2018 13:54:37 +0100 Subject: [PATCH] add mobile support to all site --- blog/assets/style.css | 40 ++++++++++++++++++++++++++++++++++++++++ blog/view/detail.ls | 6 +++++- blog/view/entries.ls | 6 +++++- blog/view/top.ls | 16 +++++++++++++++- grs/mainsite.css | 24 ++++++++++++++++++++++-- index.ls | 4 +++- info/index.ls | 4 ++++ 7 files changed, 94 insertions(+), 6 deletions(-) diff --git a/blog/assets/style.css b/blog/assets/style.css index 7365fab..95c8f0e 100644 --- a/blog/assets/style.css +++ b/blog/assets/style.css @@ -62,6 +62,8 @@ html,body{ #center{ height: calc(100% - 80px); overflow-y: auto; + padding-left: 15px; + padding-right: 15px; } #navbar{ margin:0 auto; @@ -70,6 +72,14 @@ html,body{ justify-content:flex-end; flex-direction: row; } +#navbar.navmobile{ + margin:0 auto; + max-width: 960px; + display: flex; + justify-content:flex-start; + flex-direction: row; + font-size: 14px; +} #container{ margin:0 auto; max-width: 960px; @@ -110,6 +120,10 @@ button{ flex-direction: row; } +#container .mobile { + display: flex; + flex-direction: column; +} #container .card .side{ padding-top:28px; padding-bottom: 0; @@ -121,6 +135,10 @@ button{ color:#3170B2; text-align: right; } +#container .mobile .side{ + width: 100%; + text-align: left; +} #container .card .side .date{ display: inline-block; color: #662702; @@ -128,6 +146,9 @@ button{ padding-bottom: 7px; border-right: 1px solid #cccccc; } +#container .mobile .side .date{ + border: 0; +} #container .card .side .tags{ display: block; padding-right: 5px; @@ -136,6 +157,9 @@ button{ color:#878887; border-right: 1px solid #cccccc; } +#container .mobile .side .tags{ + border: 0; +} #container .card .side .tags a{ color:#878887; text-decoration: none; @@ -166,6 +190,13 @@ button{ margin-left: auto; margin-right: auto; } +#container .blogentry pre { + white-space: pre-wrap; /* Since CSS 2.1 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ +} #container .blogentry a{ text-decoration: none; color:#3170B2; @@ -256,6 +287,15 @@ div.logo{ background-position: right; background-size: 34% 85%; } +#navbar.navmobile div.logo { + display: block; + width: 50px; + height:50px; + background-image: url(mrsang.min.png); + background-repeat: no-repeat; + background-position: right; + background-size: 85% 85%; +} div.logo a{ display: block; text-decoration: none; diff --git a/blog/view/detail.ls b/blog/view/detail.ls index e6471d4..50da4e9 100644 --- a/blog/view/detail.ls +++ b/blog/view/detail.ls @@ -4,6 +4,10 @@ local order = arg[2] local content = nil; local topview = loadscript(BLOG_ROOT.."/view/top.ls") + local class = "card" + if HEADER.mobile then + class = "card mobile" + end local title = "Welcome to my blog" if not #data or #order == 0 then topview(title) @@ -31,7 +35,7 @@ end ?> -
+
diff --git a/blog/view/entries.ls b/blog/view/entries.ls index b6269a9..e198dc4 100644 --- a/blog/view/entries.ls +++ b/blog/view/entries.ls @@ -2,6 +2,10 @@ local arg = {...} local datas = arg[1] local order = arg[2] + local class = "card" + if HEADER.mobile then + class = "card mobile" + end loadscript(BLOG_ROOT.."/view/top.ls")("Welcome to my blog") if #order == 0 then ?> @@ -19,7 +23,7 @@ for idx,v in pairs(order) do local data = datas[v] ?> -
+
diff --git a/blog/view/top.ls b/blog/view/top.ls index 346c38a..62103e6 100644 --- a/blog/view/top.ls +++ b/blog/view/top.ls @@ -1,6 +1,10 @@ @@ -27,16 +31,26 @@
-
diff --git a/grs/mainsite.css b/grs/mainsite.css index 47d7a1f..37b8b31 100644 --- a/grs/mainsite.css +++ b/grs/mainsite.css @@ -6,6 +6,7 @@ html,body{ width: 100%; height: 100%; overflow: hidden; + overflow-y: auto; } #desktop{ width:100%; @@ -59,18 +60,37 @@ html,body{ width: 100%; padding:5px; border-top: 1px solid #878887; + background-color: white; } #container{ margin-top: 50px; display: flex; justify-content: center; flex-direction: row; + margin-bottom: 50px; +} +#container.mobile{ + margin-top: 20px; + display: flex; + justify-content: center; + flex-direction: column; + overflow-y: auto; } #container img{ + display: block; max-height: 250px; + max-width: 250px; + width: auto; + margin-left: 20px; + height: auto; +} +#container.mobile img{ + margin: 0 auto; + margin-bottom: 10px; } #vcard { margin-left: 20px; + margin-right: 20px; } #vcard p.greeting{ font-size: 30px; @@ -82,8 +102,9 @@ html,body{ #vcard p.dedicate{ color: #414339; /*font-family: "HermitLight"; - text-align: justify; + */ + text-align: justify; font-size: 16px; padding: 0; margin: 0; @@ -91,7 +112,6 @@ html,body{ max-width: 500px; } - afx-app-window div.afx-window-wrapper{ border:1px solid #a6a6a6; /*box-shadow: 1px 1px 1px #cbcbcb;*/ diff --git a/index.ls b/index.ls index c4184e5..5ec76e5 100644 --- a/index.ls +++ b/index.ls @@ -6,6 +6,8 @@ debug.traceback=nil error("Permission denied") end + local mobilecls = "" + if HEADER.mobile then mobilecls = "mobile" end local db = require("db.model").get(user,"user",nil) if db == nil then die("cannot get db data") end local data, a = db:getAll() @@ -96,7 +98,7 @@
-
+

Hi, I'm Xuan Sang LE

diff --git a/info/index.ls b/info/index.ls index 80d63ee..8e95118 100644 --- a/info/index.ls +++ b/info/index.ls @@ -160,6 +160,9 @@

Powered by antd server, (C) 2017-2018 Xuan Sang LE

+
+