impl classes for truncing and untruncing without jquery
This commit is contained in:
GlennWSo
parent
61b3da9670
commit
a400e9ff2b
16
static/cloud/index.html
Normal file
16
static/cloud/index.html
Normal 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>
|
||||||
|
|
@ -1,58 +1,46 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
Selfhosted Services
|
||||||
|
</h1>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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://unpkg.com/htmx.org@1.9.11"
|
||||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0"
|
||||||
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
|
crossorigin="anonymous"></script>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div data-role="page" id="pageone">
|
<ul class="lasdist">
|
||||||
<div data-role="main" class="ui-content">
|
<div class="card trunc">
|
||||||
<h2>Selfhosted Services</h2>
|
<img class="icon" src="nextcloud_icon_14.png">
|
||||||
<ul data-role="listview" data-inset="true">
|
<h3>Nextcloud</h3>
|
||||||
<li>
|
<p class="text">
|
||||||
<a href="https://cloud.sondell.org">
|
Mollis, ante non euismod ornare, orci diam ornare orci, eu mattis
|
||||||
<img src="nextcloud_icon_14.png">
|
tortor lectus at erat. Nam rutrum erat nec euismod lacinia. Curabitur
|
||||||
<h2>Nextcloud</h2>
|
et velit ut mauris euismod tempus. Fusce pharetra augue lectus, quis
|
||||||
<p>Nextcloud is a file share and communication platform. Access & sync your files,
|
maximus quam auctor pellentesque.
|
||||||
contacts, calendars & communicate and collaborate across your devices. You decide what happens with your
|
</p>
|
||||||
data, where it is and who can access...
|
<a class="footer" href="https://cloud.sondell.org">web app</a>
|
||||||
</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>
|
|
||||||
</div>
|
</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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
42
static/style.css
Normal file
42
static/style.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue