glennwso/home
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

impl classes for truncing and untruncing without jquery

Browse source
This commit is contained in:
GlennWSo 2024-04-08 10:32:48 +02:00
parent 61b3da9670
commit a400e9ff2b
3 changed files with 90 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
static/cloud/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
</head>
<body>
hello world
<body>

76
static/index.html
View file

@ -1,58 +1,46 @@
<!DOCTYPE html>
<html>
<h1>
Selfhosted Services
</h1>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.11"
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>Selfhosted Services</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="https://cloud.sondell.org">
<img src="nextcloud_icon_14.png">
<h2>Nextcloud</h2>
<p>Nextcloud is a file share and communication platform. Access & sync your files,
contacts, calendars & communicate and collaborate across your devices. You decide what happens with your
data, where it is and who can access...
</p>
</a>
</li>
<li>
<a href="https://jelly.sondell.org">
<img src="jelly_white.png">
<h2>Jellyfin</h2>
<p>
Jellyfin is a Free Software Media System that puts you in control of managing and streaming your media.
</p>
</a>
</li>
<li>
<a href="https://books.sondell.org">
<img src="audiobooks.jpg">
<h2>Audiobookshelf</h2>
<p>
Audiobookshelf is an open-source media server for your audiobooks and podcasts.
</p>
</a>
</li>
<li>
<a href="https://git.sondell.org/explore/repos">
<img src="forgejo.png">
<h2>Forgejo</h2>
<p>Forgejo is a self-hosted Git forge that can help you easily manage software projects.</p>
</a>
</li>
</ul>
<ul class="lasdist">
<div class="card trunc">
<img class="icon" src="nextcloud_icon_14.png">
<h3>Nextcloud</h3>
<p class="text">
Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
maximus quam auctor pellentesque.
</p>
<a class="footer" href="https://cloud.sondell.org">web app</a>
</div>
</div>
<div class="card">
<img class="icon" src="nextcloud_icon_14.png">
<h3>Nextcloud</h3>
<p class="text">
Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
maximus quam auctor pellentesque.
</p>
<a class="footer" href="https://cloud.sondell.org">web app</a>
</div>
</ul>
</body>
</html>

42
static/style.css Normal file
View file

@ -0,0 +1,42 @@
.icon {
height: 100px;
float: left;
margin-right: 1em;
border-radius: 5px;
}
.list {
display: flex;
flex-direction: column;
}
.card {
border: 1px solid #1948e3;
border-radius: 25px;
margin: 0 auto;
padding: 1em;
}
.card.trunc {
height: 100px;
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer {
display: none;
}
}
.card:hover {
background-color: lightblue;
}
.card:not(:last-of-type) {
margin-bottom: 20px;
}