mirror of
https://github.com/lxsang/antd-web-apps
synced 2024-11-20 02:18:20 +01:00
add mobile support to all site
This commit is contained in:
Xuan Sang LE
parent
16287ce58e
commit
7f6b11a45a
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
?>
|
||||
<div class = "card">
|
||||
<div class = "<?=class?>">
|
||||
<div class = "side">
|
||||
<span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span>
|
||||
<span class = "tags">
|
||||
|
||||
@ -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]
|
||||
?>
|
||||
<div class = "card">
|
||||
<div class = "<?=class?>">
|
||||
<div class = "side">
|
||||
<span class = "date"><?=data.ctimestr:gsub("%s+.*$","")?></span>
|
||||
<span class = "tags">
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
<?lua
|
||||
local arg = {...}
|
||||
local title = arg[1]
|
||||
local cls = ""
|
||||
if HEADER.mobile then
|
||||
cls = "navmobile"
|
||||
end
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -27,16 +31,26 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id = "top">
|
||||
<div id = "navbar">
|
||||
<div id = "navbar" class = "<?=cls?>">
|
||||
<div class = "logo"><a href = "https://lxsang.me"></a></div>
|
||||
<ul>
|
||||
<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-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>
|
||||
<?lua end ?>
|
||||
</ul>
|
||||
<?lua
|
||||
if not HEADER.mobile then
|
||||
?>
|
||||
<input type = "text" class = "search-box"></input>
|
||||
<div class= "search-icon"></div>
|
||||
<?lua
|
||||
end
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<div id = "center">
|
||||
|
||||
@ -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;*/
|
||||
|
||||
4
index.ls
4
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 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div id = "center">
|
||||
<div id = "container">
|
||||
<div id = "container" class="<?=mobilecls?>" >
|
||||
<img src = "grs/images/mrsang.png" ></img>
|
||||
<div id = "vcard">
|
||||
<p class = "greeting">Hi, I'm <b>Xuan Sang LE</b></p>
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
<?lua
|
||||
if not HEADER.mobile then
|
||||
?>
|
||||
<div class = "cv-toc">
|
||||
<ul>
|
||||
<?lua
|
||||
@ -174,6 +177,7 @@
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
<?lua end ?>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user