sam/treebird
sam/treebird
1
0
Fork 0
forked from mirrors/treebird
Code Issues Pull requests Projects Releases Wiki Activity

Mobile CSS

Browse source 
FossilOrigin-Name: b9cc1e6da0111fac5f38e3d26c122ba40ffb7ca4246a0cd1244c826038773073
This commit is contained in:
nekobit 2022-06-30 03:07:53 +00:00
parent dbc737226c
commit dab66cf833
3 changed files with 141 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dist/svg/menu.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1.6404"><line x1="5.6" x2="18.6" y1="7.7996" y2="7.7996"/><line x1="5.6" x2="18.6" y1="12" y2="12"/><line x1="5.6" x2="18.6" y1="16.2" y2="16.2"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 410 B

145
dist/treebird20.css vendored
View file

@ -119,6 +119,27 @@ table.ui-table td
z-index: 999;
}
#navbar .navbar-btn
{
width: 20px;
height: 20px;
}
#navbar .leftbar-btn
{
float: left;
margin: 10px 0 10px 15px;
width: 30px;
height: 30px;
}
#navbar .rightbar-btn
{
float: right;
margin: 15px;
}
#navbar img
{
vertical-align: middle;
@ -137,16 +158,15 @@ table.ui-table td
#navbar-right-container
{
width: 795px;
display: inline-block;
position: relative;
top: 9px;
align-items: center;
float: right;
margin: 11px;
}
#navbar-right form
{
float: right;
display: inline-block;
}
#navbar-right
@ -168,8 +188,7 @@ table.ui-table td
#main
{
width: 568px;
max-width: 568px !important;
min-width: 568px;
max-width: 568px;
border-collapse: collapse !important;
background-color: #fafafa;
padding: 0;
@ -688,7 +707,7 @@ svg.in-reply-to-icon
.status-view
{
display: inline;
display: inline-block;
border: 1px solid #cacaca;
background-color: #f3f3f3;
border-radius: 3px;
@ -775,6 +794,7 @@ svg.in-reply-to-icon
.notification-info-format,
.notification-content
{
position: relative;
min-width: 0;
width: auto;
padding: 0 0 0 10px;
@ -806,8 +826,8 @@ svg.in-reply-to-icon
.status .poster-stats
{
display: flex;
align-items: center;
position: relative;
display: block;
max-width: 480px;
}
@ -818,11 +838,11 @@ svg.in-reply-to-icon
.poster-stats .alignend
{
flex: 1;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
background-color: #fafafa;
display: inline-block;
right: 0px;
padding: 1px 5px;
position: absolute;
}
.status .username,
@ -1430,7 +1450,7 @@ p}
max-height: 180px;
}
input[type=radio].hidden:not(:checked) + .emoji-picker-emojos
input[type=radio].hidden:not(:checked) + .emoji-picker-emojos
{
display: none;
}
@ -2120,3 +2140,98 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
text-align: center;
display: block;
}
/****************************************
* Responsiveness *
****************************************/
@media only screen and (max-width: 1000px)
{
#main-page, #navbar
{
width: 750px;
}
input[type=checkbox].hidden#rightbar-show:not(:checked) + .ui-table #rightbar
{
display: none;
}
#rightbar
{
position: fixed;
right: 0px;
height: 100%;
z-index: 100;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
}
/* Requires flexbox */
@media only screen and (max-width: 760px)
{
input[type=checkbox].hidden#leftbar-show:not(:checked) + input + .ui-table #leftbar
{
display: none;
}
#main-page-container
{
padding: 0;
margin: 0;
}
#main-page, #navbar
{
width: 100%;
}
#main-page { border: 0; }
#main { width: 100%; max-width: 100%; }
#navbar
{
position: sticky;
top: 0px;
border-radius: 0;
border-top: 0;
}
#leftbar
{
position: fixed;
left: 0px;
height: 100%;
z-index: 100;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
#navbar-right-container
{
width: 100%;
padding: 12px;
background-color: #efefef;
border-top: 1px solid #cacaca;
border-bottom: 1px solid #cacaca;
text-align: center;
margin: 0;
}
.statusbox textarea
{
width: calc(100% - 11px);
max-width: unset;
min-width: unset;
}
.status .poster-stats
{
max-width: unset;
}
.status .status-content
{
width: unset;
}
}

10
static/index.tmpl
View file

@ -5,14 +5,22 @@
<title>{{ %s : title }}</title>
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="stylesheet" type="text/css" href="/{{ %s : theme }}{{ %s : theme_clr }}.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ %s : title }} is a decentralized social media platform">
</head>
<body {{ %s : background_url }}>
<div></div>
<div id="main-page-container">
<div id="main-page">
<header id="navbar">
<label for="leftbar-show">
<svg class="leftbar-btn navbar-btn" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1.6404"><line x1="5.6" x2="18.6" y1="7.7996" y2="7.7996"/><line x1="5.6" x2="18.6" y1="12" y2="12"/><line x1="5.6" x2="18.6" y1="16.2" y2="16.2"/></g></svg>
</label>
<a href="{{ %s : prefix }}/"><img src="/treebird_logo.png" height="42"></a>
<span class="info">{{ %s : name }}</span>
<label for="rightbar-show">
<svg class="rightbar-btn navbar-btn" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg>
</label>
<div id="navbar-right-container">
<div id="navbar-right">
{{ %s : sidebar_cnt }}
@ -24,6 +32,8 @@
</div>
</div>
</header>
<input type="checkbox" id="leftbar-show" class="hidden">
<input type="checkbox" id="rightbar-show" class="hidden">
<table id="content" class="ui-table">
<!-- Navigation -->
<tr>