dany/antd-web-apps
1
0
Fork 0
mirror of https://github.com/lxsang/antd-web-apps synced 2024-11-20 02:18:20 +01:00
Code Issues Projects Releases Wiki Activity

add mobile support to all site

Browse Source
This commit is contained in:
Xuan Sang LE 2018-02-25 13:54:37 +01:00
parent 16287ce58e
commit 7f6b11a45a
7 changed files with 94 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
blog/assets/style.css
View File

@ -62,6 +62,8 @@ html,body{
#center{ #center{
height: calc(100% - 80px); height: calc(100% - 80px);
overflow-y: auto; overflow-y: auto;
padding-left: 15px;
padding-right: 15px;
} }
#navbar{ #navbar{
margin:0 auto; margin:0 auto;
@ -70,6 +72,14 @@ html,body{
justify-content:flex-end; justify-content:flex-end;
flex-direction: row; flex-direction: row;
} }
#navbar.navmobile{
margin:0 auto;
max-width: 960px;
display: flex;
justify-content:flex-start;
flex-direction: row;
font-size: 14px;
}
#container{ #container{
margin:0 auto; margin:0 auto;
max-width: 960px; max-width: 960px;
@ -110,6 +120,10 @@ button{
flex-direction: row; flex-direction: row;
} }
#container .mobile {
display: flex;
flex-direction: column;
}
#container .card .side{ #container .card .side{
padding-top:28px; padding-top:28px;
padding-bottom: 0; padding-bottom: 0;
@ -121,6 +135,10 @@ button{
color:#3170B2; color:#3170B2;
text-align: right; text-align: right;
} }
#container .mobile .side{
width: 100%;
text-align: left;
}
#container .card .side .date{ #container .card .side .date{
display: inline-block; display: inline-block;
color: #662702; color: #662702;
@ -128,6 +146,9 @@ button{
padding-bottom: 7px; padding-bottom: 7px;
border-right: 1px solid #cccccc; border-right: 1px solid #cccccc;
} }
#container .mobile .side .date{
border: 0;
}
#container .card .side .tags{ #container .card .side .tags{
display: block; display: block;
padding-right: 5px; padding-right: 5px;
@ -136,6 +157,9 @@ button{
color:#878887; color:#878887;
border-right: 1px solid #cccccc; border-right: 1px solid #cccccc;
} }
#container .mobile .side .tags{
border: 0;
}
#container .card .side .tags a{ #container .card .side .tags a{
color:#878887; color:#878887;
text-decoration: none; text-decoration: none;
@ -166,6 +190,13 @@ button{
margin-left: auto; margin-left: auto;
margin-right: 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{ #container .blogentry a{
text-decoration: none; text-decoration: none;
color:#3170B2; color:#3170B2;
@ -256,6 +287,15 @@ div.logo{
background-position: right; background-position: right;
background-size: 34% 85%; 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{ div.logo a{
display: block; display: block;
text-decoration: none; text-decoration: none;

6
blog/view/detail.ls
View File

@ -4,6 +4,10 @@
local order = arg[2] local order = arg[2]
local content = nil; local content = nil;
local topview = loadscript(BLOG_ROOT.."/view/top.ls") 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" local title = "Welcome to my blog"
if not #data or #order == 0 then if not #data or #order == 0 then
topview(title) topview(title)
@ -31,7 +35,7 @@
end end
?> ?>
<div class = "card"> <div class = "<?=class?>">
<div class = "side"> <div class = "side">
<span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span> <span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span>
<span class = "tags"> <span class = "tags">

6
blog/view/entries.ls
View File

@ -2,6 +2,10 @@
local arg = {...} local arg = {...}
local datas = arg[1] local datas = arg[1]
local order = arg[2] 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") loadscript(BLOG_ROOT.."/view/top.ls")("Welcome to my blog")
if #order == 0 then if #order == 0 then
?> ?>
@ -19,7 +23,7 @@
for idx,v in pairs(order) do for idx,v in pairs(order) do
local data = datas[v] local data = datas[v]
?> ?>
<div class = "card"> <div class = "<?=class?>">
<div class = "side"> <div class = "side">
<span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span> <span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span>
<span class = "tags"> <span class = "tags">

16
blog/view/top.ls
View File

@ -1,6 +1,10 @@
<?lua <?lua
local arg = {...} local arg = {...}
local title = arg[1] local title = arg[1]
local cls = ""
if HEADER.mobile then
cls = "navmobile"
end
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -27,16 +31,26 @@
</head> </head>
<body> <body>
<div id = "top"> <div id = "top">
<div id = "navbar"> <div id = "navbar" class = "<?=cls?>">
<div class = "logo"><a href = "https://lxsang.me"></a></div> <div class = "logo"><a href = "https://lxsang.me"></a></div>
<ul> <ul>
<li><i class = "fa fa-home"></i><a href="./">Home</a></li> <li><i class = "fa fa-home"></i><a href="./">Home</a></li>
<li ><i class = "fa fa-address-card"></i><a href="https://info.lxsang.me" >Porfolio</a></li> <li ><i class = "fa fa-address-card"></i><a href="https://info.lxsang.me" >Porfolio</a></li>
<li><i class = "fa fa-paper-plane"></i><a href="#" onclick="" >Contact</a></li> <li><i class = "fa fa-paper-plane"></i><a href="#" onclick="" >Contact</a></li>
<?lua
if not HEADER.mobile then
?>
<li > <i class = "fa fa-globe"></i><a href = "https://os.lxsang.me" target="_blank">AntOS</a></li> <li > <i class = "fa fa-globe"></i><a href = "https://os.lxsang.me" target="_blank">AntOS</a></li>
<?lua end ?>
</ul> </ul>
<?lua
if not HEADER.mobile then
?>
<input type = "text" class = "search-box"></input> <input type = "text" class = "search-box"></input>
<div class= "search-icon"></div> <div class= "search-icon"></div>
<?lua
end
?>
</div> </div>
</div> </div>
<div id = "center"> <div id = "center">

24
grs/mainsite.css
View File

@ -6,6 +6,7 @@ html,body{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
overflow-y: auto;
} }
#desktop{ #desktop{
width:100%; width:100%;
@ -59,18 +60,37 @@ html,body{
width: 100%; width: 100%;
padding:5px; padding:5px;
border-top: 1px solid #878887; border-top: 1px solid #878887;
background-color: white;
} }
#container{ #container{
margin-top: 50px; margin-top: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
margin-bottom: 50px;
}
#container.mobile{
margin-top: 20px;
display: flex;
justify-content: center;
flex-direction: column;
overflow-y: auto;
} }
#container img{ #container img{
display: block;
max-height: 250px; max-height: 250px;
max-width: 250px;
width: auto;
margin-left: 20px;
height: auto;
}
#container.mobile img{
margin: 0 auto;
margin-bottom: 10px;
} }
#vcard { #vcard {
margin-left: 20px; margin-left: 20px;
margin-right: 20px;
} }
#vcard p.greeting{ #vcard p.greeting{
font-size: 30px; font-size: 30px;
@ -82,8 +102,9 @@ html,body{
#vcard p.dedicate{ #vcard p.dedicate{
color: #414339; color: #414339;
/*font-family: "HermitLight"; /*font-family: "HermitLight";
text-align: justify;
*/ */
text-align: justify;
font-size: 16px; font-size: 16px;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -91,7 +112,6 @@ html,body{
max-width: 500px; max-width: 500px;
} }
afx-app-window div.afx-window-wrapper{ afx-app-window div.afx-window-wrapper{
border:1px solid #a6a6a6; border:1px solid #a6a6a6;
/*box-shadow: 1px 1px 1px #cbcbcb;*/ /*box-shadow: 1px 1px 1px #cbcbcb;*/

4
index.ls
View File

@ -6,6 +6,8 @@
debug.traceback=nil debug.traceback=nil
error("Permission denied") error("Permission denied")
end end
local mobilecls = ""
if HEADER.mobile then mobilecls = "mobile" end
local db = require("db.model").get(user,"user",nil) local db = require("db.model").get(user,"user",nil)
if db == nil then die("cannot get db data") end if db == nil then die("cannot get db data") end
local data, a = db:getAll() local data, a = db:getAll()
@ -96,7 +98,7 @@
</ul> </ul>
</div> </div>
<div id = "center"> <div id = "center">
<div id = "container"> <div id = "container" class="<?=mobilecls?>" >
<img src = "grs/images/mrsang.png" ></img> <img src = "grs/images/mrsang.png" ></img>
<div id = "vcard"> <div id = "vcard">
<p class = "greeting">Hi, I'm <b>Xuan Sang LE</b></p> <p class = "greeting">Hi, I'm <b>Xuan Sang LE</b></p>

4
info/index.ls
View File

@ -160,6 +160,9 @@
<p style="text-align:right; padding:0; margin:0;color:#878887;">Powered by antd server, (C) 2017-2018 Xuan Sang LE</p> <p style="text-align:right; padding:0; margin:0;color:#878887;">Powered by antd server, (C) 2017-2018 Xuan Sang LE</p>
</div> </div>
</div> </div>
<?lua
if not HEADER.mobile then
?>
<div class = "cv-toc"> <div class = "cv-toc">
<ul> <ul>
<?lua <?lua
@ -174,6 +177,7 @@
?> ?>
</ul> </ul>
</div> </div>
<?lua end ?>
</div> </div>
<script> <script>
window.onload = function() window.onload = function()