jeff/timeline
1
0
Fork 0
mirror of https://github.com/sorenpeter/timeline.git synced 2025-12-15 10:57:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix mobile view for profile and added fontawesome icons in top nav

Browse source
This commit is contained in:
sørenpeter 2024-04-23 21:16:41 +02:00
parent 1074b82d60
commit 928f6038ba
6 changed files with 206 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -1,4 +1,4 @@
# timeline - create you own social website # 🌀 timeline - create you own social website
Created by sørenpeter (www.darch.dk) Created by sørenpeter (www.darch.dk)
@ -110,4 +110,5 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- [Slimdown](https://github.com/jbroadway/slimdown) - A simple regex-based Markdown parser in PHP. - [Slimdown](https://github.com/jbroadway/slimdown) - A simple regex-based Markdown parser in PHP.
- Tag cloud feature is based on php code by [Domingos Faria](https://social.dfaria.eu/search)

128
_custom.css Normal file
View file

@ -0,0 +1,128 @@
/* === Custom CSS for www.darch.dk */
@import url(//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack-subset.css);
/* Global variables. */
:root,
::backdrop {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
--standard-border-radius: 0;
/* Darch theme */
--bg: #333;
--accent-bg: #333;
--text: #ffe;
--text-light: #ddd;
--border: #585858;
--accent: #9F9;
--code: #9F9;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
}
body > header {
border-bottom: 1px solid #9F9;
}
/* Site logo and title */
header p a img.logo {
display: none;
}
header p a,
header p a:visited {
color: #FFE;
font-family: var(--mono-font);
max-width: 4em;
display: block;
text-decoration: none;
text-transform: uppercase;
font-size: .9em;
line-height: .9;
}
/* Header menu */
header > nav a,
header > nav a:visited {
font-family: var(--mono-font);
margin: 0 0.5rem 1rem 0.5rem;
border: none;
background-color: #9F9;
color: #333;
text-decoration: none;
padding: 0 0.5em;
}
header > nav a:hover,
header > nav a.current,
header > nav a[aria-current="page"] {
background-color: #FFE;
color: #333;
}
header > nav a.secondary,
header > nav a:visited.secondary {
background-color: #222;
color: #555;
}
/* Reduce nav size on mobile */
@media only screen and (max-width: 720px) {
header > nav {
margin-top: -0.5rem;
}
header > nav a {
padding: 0 0.2rem;
line-height: 1.2;
margin-bottom: 0.5rem;
}
}
header > nav select {
padding: 0.3rem;
}
/* Timeline view */
article {
background-color: #222;
border-radius: 5px;
border: none;
}
.twt-msg {
/* color: #FFE; */
}
article small {
color: var(--text-light);
}
/*
article small a,
article small a:visited {
color: #9F9;
font-weight: normal;
}
article small a:hover {
text-decoration: underline;
}
*/
/* New twt Form box */
article#new_twt {
background-color: var(--bg);
}
input, textarea {
background-color: #222;
}

60
libs/timeline.css
View file

@ -49,14 +49,9 @@ body > header {
} }
body > header p { body > header p {
/* max-width: 40rem;*/
margin: 1rem; margin: 1rem;
} }
header > nav a {
/* border: none;*/
}
header > nav form { header > nav form {
margin-top: -0.5rem; margin-top: -0.5rem;
} }
@ -143,7 +138,7 @@ a.author {
/* === PROFILE === */ /* === PROFILE === */
.profile { .profile {
padding: 0 1rem; padding: 0 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -172,19 +167,13 @@ a.author {
.profile a, .profile a,
.profile a:visited { .profile a:visited {
color: var(--text); color: var(--text);
text-decoration: none;
} }
.profile a:hover { .profile a:hover {
color: var(--accent); color: var(--accent);
} }
.profile a.button {
font-size: small;
color: var(--accent);
background-color: var(--accent-bg);
padding: 0.25em 0.5rem;
margin-left: 0.5rem;
}
.profile-nav { .profile-nav {
margin-top: 1rem; margin-top: 1rem;
@ -195,8 +184,7 @@ a.author {
padding: 0.25rem; padding: 0.25rem;
} }
.profile-filters a { .profile-filters a {
text-decoration: none;
padding-right: 0.5rem; padding-right: 0.5rem;
font-weight: bold; font-weight: bold;
} }
@ -205,6 +193,35 @@ a.author {
color: var(--accent); color: var(--accent);
} }
.profile a.button {
font-size: small;
/*color: var(--accent); */
background-color: var(--accent-bg);
padding: 0.25em 0.5rem;
margin-left: 0.5rem;
}
a.txt-link i {
display: none;
color: var(--accent);
}
a.txt-link span {
text-decoration: underline;
}
a.txt-link:hover span {
text-decoration: none;
}
/* Only show icon for link to txt */
@media only screen and (max-width: 720px) {
a.txt-link i { display: initial; }
a.txt-link span { display: none; }
}
/* == Tag Cloud ===================== */ /* == Tag Cloud ===================== */
.tagcloud { .tagcloud {
@ -273,7 +290,18 @@ article small {
article small a, article small a,
article small a:visited { article small a:visited {
color: var(--text); color: var(--text);
text-decoration: none;
font-weight: bold;
}
article small a.right,
article small a.right:visited {
font-weight: normal;
}
article small a:hover {
color: var(--accent);
/* text-decoration: underline;*/
} }
@ -297,7 +325,7 @@ nav.pagnation {
/* === REFRESH === */ /* === REFRESH === */
#refreshInfo { #refreshInfo {
display: block; display: block;
} }
#refreshInfo { #refreshInfo {

29
partials/header.php
View file

@ -9,11 +9,12 @@ $profile = getTwtsFromTwtxtString($config['public_txt_url']);
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="webmention" href="<?= $baseURL ?>/webmention" /> <link rel="icon" type="image/x-icon" href="<?= $baseURL ?>/media/logo.png">
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/simple.css"> <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/simple.css">
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/timeline.css"> <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/libs/timeline.css">
<link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/custom.css"> <link rel="stylesheet" type="text/css" href="<?= $baseURL ?>/custom.css">
<link rel="icon" type="image/x-icon" href="<?= $baseURL ?>/media/logo.png"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="webmention" href="<?= $baseURL ?>/webmention" />
<title><?= $title ?></title> <title><?= $title ?></title>
</head> </head>
<body> <body>
@ -39,20 +40,20 @@ $profile = getTwtsFromTwtxtString($config['public_txt_url']);
<?php //if ($validSession) { // TODO: Make login seqcure ?> <?php //if ($validSession) { // TODO: Make login seqcure ?>
<?php if( isset($_SESSION['password'])) { /* <?php if( isset($_SESSION['password'])) { /*
if($_SESSION['password']=="$password") {*/ // Hacky login ?> if($_SESSION['password']=="$password") {*/ // Hacky login ?>
<li><a href="<?= $baseURL ?>/refresh?url=<?= $url ?>">Refresh</a></li> <li><a href="<?= $baseURL ?>/refresh?url=<?= $url ?>"><i class="fa fa-refresh"></i></a></li>
<li><a href="<?= $baseURL ?>">Timeline</a></li> <li><a href="<?= $baseURL ?>"><i class="fa fa-comments-o">&nbsp;</i>Timeline</a></li>
<li><a href="<?= $baseURL ?>?profile=<?=$url ?>">Profile</a></li> <li><a href="<?= $baseURL ?>?profile=<?=$url ?>"><i class="fa fa-user-circle">&nbsp;</i>Profile</a></li>
<li><a href="<?= $baseURL ?>/gallery?profile=<?= $profile->mainURL ?>">Gallery</a></li> <li><a href="<?= $baseURL ?>/gallery?profile=<?= $profile->mainURL ?>"><i class="fa fa-picture-o"></i>&nbsp;Gallery</a></li>
<li><a href="<?= $baseURL ?>/following">Following <?php // echo count($twtFollowingList); ?></a></li> <li><a href="<?= $baseURL ?>/following"><i class="fa fa-users">&nbsp;</i>Following <?php // echo count($twtFollowingList); ?></a></li>
<li><a href="<?= $baseURL ?>/add">Add feed</a></li> <li><a href="<?= $baseURL ?>/add"><i class="fa fa-user-plus"></i></a></li>
<li><a href="<?= $baseURL ?>/logout">Log Out</a></li> <li><a href="<?= $baseURL ?>/logout"><i class="fa fa-sign-out">&nbsp;</i>Log Out</a></li>
<li><?php // include 'partials/lists.php'; ?></li> <li><?php // include 'partials/lists.php'; ?></li>
<?php /*}*/ } else { ?> <?php /*}*/ } else { ?>
<li><a href="<?= $baseURL ?>?profile=<?= $url ?>">Profile</a></li> <li><a href="<?= $baseURL ?>?profile=<?= $url ?>"><i class="fa fa-user-circle">&nbsp;</i>Profile</a></li>
<li><a href="<?= $baseURL ?>/gallery?profile=<?= $profile->mainURL ?>">Gallery</a></li> <li><a href="<?= $baseURL ?>/gallery?profile=<?= $profile->mainURL ?>"><i class="fa fa-picture-o">&nbsp;</i>Gallery</a></li>
<li><a href="<?= $baseURL ?>/following">Following <?php // echo count($twtFollowingList); ?></a></li> <li><a href="<?= $baseURL ?>/following"><i class="fa fa-users">&nbsp;</i>Following <?php // echo count($twtFollowingList); ?></a></li>
<li><a href="<?= $baseURL ?>">Timeline</a></li> <li><a href="<?= $baseURL ?>"><i class="fa fa-comments-o">&nbsp;</i>Timeline</a></li>
<li><a href="<?= $baseURL ?>/login" class="secondary">Log in</a></li> <li><a href="<?= $baseURL ?>/login" class="secondary"><i class="fa fa-sign-in">&nbsp;</i>Log in</a></li>
<?php } ?> <?php } ?>
</ul> </ul>
</nav> </nav>

20
partials/profile.php
View file

@ -76,19 +76,21 @@ if ($is_gallery) {
</div> </div>
<div class="profile-nav"> <div class="profile-nav">
<span class="profile-filters"> <span class="profile-filters">
<a <?=$posts_active?> href="<?=$profileURL?>" >Posts</a> <a <?=$posts_active?> href="<?=$profileURL?>">Posts</a>
<a <?=$replies_active?> href="<?=$baseURL?>/replies?profile=<?=$profile->mainURL?>" >Replies</a> <a <?=$replies_active?> href="<?=$baseURL?>/replies?profile=<?=$profile->mainURL?>">Replies</a>
<a <?=$gallery_artive?> href="<?=$baseURL?>/gallery?profile=<?=$profile->mainURL?>" >Gallery</a> <a <?=$gallery_artive?> href="<?=$baseURL?>/gallery?profile=<?=$profile->mainURL?>">Gallery</a>
</span> </span>
<span class="right"> <span class="right">
<!-- <a href="following.php">Following <?php echo count($twtFollowingList); ?></a> | --> <!-- <a href="following.php">Following <?php echo count($twtFollowingList); ?></a> | -->
<a target="_blank" href="<?=$profile->mainURL?>"><?=$profile->mainURL?></a> <a class="txt-link" target="_blank" href="<?=$profile->mainURL?>">
<i class="fa fa-file-text-o"></i><span><?=$profile->mainURL?></span>
</a>
<a class="button" href="https://yarn.social" >How to follow</a> <a class="button" href="https://yarn.social" >How to follow</a>
</span> </span>
<div class="tagcloud"> <div class="tagcloud">
<?php include_once 'partials/tag_cloud.php'; ?> <?php include_once 'partials/tag_cloud.php'; ?>
</div> </div>

8
partials/timeline.php
View file

@ -26,15 +26,19 @@
<?php <?php
if ($twt->replyToHash) { if ($twt->replyToHash) {
echo 'In reply to: <a href="' . $baseURL . '/conv/' . $twt->replyToHash . '">#' . $twt->replyToHash . '</a>'; echo 'In reply to: <a href="' . $baseURL . '/conv/' . $twt->replyToHash . '">#' . $twt->replyToHash . '</a>';
//echo '<a href="/conv/'.$twt->replyToHash.'">Convesation</a>'; //echo '<a href="'.$baseURL.'/conv/'.$twt->replyToHash.'">Convesation</a>';
} else {
echo '<a href="'.$baseURL.'/conv/'.$twt->hash.'">Read replies</a>';
} }
/*
if ($twt->replyToHash && isset($_SESSION['password'])) { if ($twt->replyToHash && isset($_SESSION['password'])) {
echo ' | '; echo ' | ';
} }
*/
if (isset($_SESSION['password'])) { if (isset($_SESSION['password'])) {
echo '<a href="' . $baseURL . '/new?hash=' . $twt->hash . '">Reply</a>'; echo ' | <a href="' . $baseURL . '/new?hash=' . $twt->hash . '">Reply</a>';
} }
?> ?>