pitchum/xmpp-invitation-page
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Show/hide app buttons depending on screen width

Browse Source
This commit is contained in:
pitchum 2021-07-23 11:08:35 +02:00 committed by root
parent 99ad1d7a41
commit a504065ec5
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.html.tpl
View File

@ -78,6 +78,13 @@ img.app, img.store {
text-align: right; text-align: right;
text-transform: none; text-transform: none;
} }
@media screen and (min-width: 801px) {
.mobile-app { display: none; }
}
@media screen and (max-width: 800px) {
.desktop-app { display: none; }
}
</style> </style>
</head> </head>
<body> <body>
@ -89,9 +96,9 @@ img.app, img.store {
<p>Je suis désormais joignable pour tchatter sur le réseau indépendant Jabber/XMPP.</p> <p>Je suis désormais joignable pour tchatter sur le réseau indépendant Jabber/XMPP.</p>
<p>Mon adresse XMPP&nbsp;: <strong>{{user_jid}}</strong></p> <p>Mon adresse XMPP&nbsp;: <strong>{{user_jid}}</strong></p>
<u>Pour me joindre&nbsp;:</u><br/> <u>Pour me joindre&nbsp;:</u><br/>
<p>1) Installe une appli Jabber/XMPP et crée-toi un compte</p> <p>1) Installe une des applis Jabber/XMPP suivantes et crée-toi un compte</p>
<ul id="downloads"> <ul id="downloads">
<li> <li class="mobile-app">
<a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play"> <a href="https://play.google.com/store/apps/details?id=im.blabber.messenger" title="Blabber.im sur Google Play">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_blabber_64px.png" /> <img class="app" src="assets/logo_blabber_64px.png" />
@ -103,7 +110,7 @@ img.app, img.store {
</div> </div>
</a> </a>
</li> </li>
<li> <li class="mobile-app">
<a href="https://apps.apple.com/fr/app/tigase-messenger/id1153516838" title="Siskin IM sur Apple Store"> <a href="https://apps.apple.com/fr/app/tigase-messenger/id1153516838" title="Siskin IM sur Apple Store">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_siskin_64px.png" /> <img class="app" src="assets/logo_siskin_64px.png" />
@ -115,7 +122,7 @@ img.app, img.store {
</div> </div>
</a> </a>
</li> </li>
<li> <li class="mobile-app">
<a href="https://f-droid.org/fr/packages/eu.siacs.conversations/" title="Conversations sur F-Droid"> <a href="https://f-droid.org/fr/packages/eu.siacs.conversations/" title="Conversations sur F-Droid">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_conversations_64px.png" /> <img class="app" src="assets/logo_conversations_64px.png" />
@ -127,7 +134,7 @@ img.app, img.store {
</div> </div>
</a> </a>
</li> </li>
<li> <li class="desktop-app">
<a href="https://gajim.org/fr/download/" title="Gajim sur windows"> <a href="https://gajim.org/fr/download/" title="Gajim sur windows">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_gajim_64px.png" /> <img class="app" src="assets/logo_gajim_64px.png" />
@ -139,7 +146,7 @@ img.app, img.store {
</div> </div>
</a> </a>
</li> </li>
<li> <li class="desktop-app">
<a href="https://dino.im/" title="Dino sur Linux"> <a href="https://dino.im/" title="Dino sur Linux">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_dino_custom_64px.png" /> <img class="app" src="assets/logo_dino_custom_64px.png" />
@ -151,7 +158,7 @@ img.app, img.store {
</div> </div>
</a> </a>
</li> </li>
<li> <li class="desktop-app">
<a href="https://beagle.im/" title="Beagle IM sur MacOS"> <a href="https://beagle.im/" title="Beagle IM sur MacOS">
<div class="appbutton"> <div class="appbutton">
<img class="app" src="assets/logo_beagle_64px.png" /> <img class="app" src="assets/logo_beagle_64px.png" />