mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-08-10 02:33:02 +02:00
related to #1464 graphic redesign of application page
This commit is contained in:
Matthieu Leproux
@@ -8,9 +8,97 @@ jQuery().ready(function(){
|
||||
|
||||
{html_head}{literal}
|
||||
<style type="text/css">
|
||||
.illustration {float:left; margin-right:10px;}
|
||||
.illustration img {max-width: 150px;}
|
||||
fieldset p {text-align:left;margin-top:0}
|
||||
|
||||
.applicationContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
float:left;
|
||||
margin:10px;
|
||||
}
|
||||
.illustration img {
|
||||
max-width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
fieldset p {
|
||||
text-align:left;
|
||||
margin-top:0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
box-shadow: 0px 0px 4px 6px #DBDBDB;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
position: relative;
|
||||
left: 100px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
/************************/
|
||||
|
||||
.applicationContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.applicationCard {
|
||||
box-shadow: 0px 0px 4px 4px #DBDBDB;
|
||||
max-width: 500px;
|
||||
margin: 20px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.applicationCard img {
|
||||
max-width: 250px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.applicationCard .textSide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.applicationCard .applicationName {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
margin: 20px 0 10px 0;
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.applicationCard .applicationDesc {
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.applicationCard .applicationLink {
|
||||
width: fit-content;
|
||||
margin-top: auto;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.applicationCard .applicationLink a {
|
||||
text-decoration: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
{/literal}{/html_head}
|
||||
|
||||
@@ -18,124 +106,124 @@ fieldset p {text-align:left;margin-top:0}
|
||||
<h2>{'Upload Photos'|@translate} {$TABSHEET_TITLE}</h2>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Piwigo Remote Sync</legend>
|
||||
<div class="applicationContainer">
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/piwigo-remote-sync.png" title="Piwigo Remote Sync"><img src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-remote-sync.jpg"></a></div>
|
||||
<p>{'Piwigo Remote Sync is able to upload a whole folder hierarchy. If you run it again, only new photos will be uploaded.'|@translate}</p>
|
||||
<div class="applicationCard">
|
||||
<img title="Piwigo Remote Sync" src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-remote-sync.jpg">
|
||||
|
||||
<p><a href="http://piwigo.org/ext/extension_view.php?eid=851" target="_blank">{'Learn more'|@translate}</a></p>
|
||||
</fieldset>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> Piwigo Remote Sync </div>
|
||||
<div class="applicationDesc"> {'Piwigo Remote Sync is able to upload a whole folder hierarchy. If you run it again, only new photos will be uploaded.'|@translate} </div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" href="http://piwigo.org/ext/extension_view.php?eid=851" target="_blank">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>{'Piwigo for iOS (iPhone, iPad, iPod Touch)'|@translate}</legend>
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/piwigo-ios.png" title="{'Piwigo for iOS (iPhone, iPad, iPod Touch)'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-ios.png"></a></div>
|
||||
<p>{'<em>Piwigo for iOS</em> application empowers you to connect to your Piwigo gallery from your iPhone, iPad or iPod Touch, create some albums and upload several photos at once.'|@translate}</p>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo for iOS (iPhone, iPad, iPod Touch)'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-ios.png">
|
||||
|
||||
<p>
|
||||
{'Available on'|@translate} <a target="_blank" href="http://itunes.apple.com/us/app/piwigo/id472225196">Apple AppStore</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> {'Piwigo for iOS (iPhone, iPad, iPod Touch)'|@translate}</div>
|
||||
<div class="applicationDesc"> {'<em>Piwigo for iOS</em> application empowers you to connect to your Piwigo gallery from your iPhone, iPad or iPod Touch, create some albums and upload several photos at once.'|@translate}</div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="http://itunes.apple.com/us/app/piwigo/id472225196"> {'Available on'|@translate} Apple AppStore</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>{'Piwigo for Android'|@translate}</legend>
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/piwigo-android.png" title="{'Piwigo for Android'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-android.png"></a></div>
|
||||
<p>{'<em>Piwigo for Android</em> application empowers you to connect your Android phone or table to your Piwigo gallery, create some albums and upload several photos at once.'|@translate}</p>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo for Android'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/piwigo-android.png">
|
||||
|
||||
<p>
|
||||
{'Available on'|@translate} <a target="_blank" href="https://play.google.com/store/apps/details?id=org.piwigo.android">Google Play</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> {'Piwigo for Android'|@translate} </div>
|
||||
<div class="applicationDesc"> {'<em>Piwigo for Android</em> application empowers you to connect your Android phone or table to your Piwigo gallery, create some albums and upload several photos at once.'|@translate} </div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="https://play.google.com/store/apps/details?id=org.piwigo.android">{'Available on'|@translate} Google Play</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lightroom</legend>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo Publish plugin for Lightroom'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/lightroom.png">
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/lightroom.png" title="{'Piwigo Publish plugin for Lightroom'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/lightroom.png"></a></div>
|
||||
<p>
|
||||
{'Adobe Photoshop Lightroom is a photography software designed to manage large quantities of digital images and doing post production work.'|@translate}
|
||||
{'The Piwigo publish Plug-in allows you to export and synchronize photos from Lightroom directly to your Piwigo photo gallery.'|@translate}
|
||||
</p>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> Lightroom </div>
|
||||
<div class="applicationDesc">
|
||||
{'Adobe Photoshop Lightroom is a photography software designed to manage large quantities of digital images and doing post production work.'|@translate}
|
||||
{'The Piwigo publish Plug-in allows you to export and synchronize photos from Lightroom directly to your Piwigo photo gallery.'|@translate}
|
||||
</div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="http://alloyphoto.com/plugins/piwigo/">{'Available on'|@translate} alloyphoto.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{'Available on'|@translate} <a target="_blank" href="http://alloyphoto.com/plugins/piwigo/">alloyphoto.com</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo publish plugin for Shotwell'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/shotwell.jpg">
|
||||
|
||||
<fieldset>
|
||||
<legend>Shotwell</legend>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> Shotwell </div>
|
||||
<div class="applicationDesc"> {'Shotwell is an open source digital photo organizer that runs on Linux. It is the default photo manager in Ubuntu and Fedora.'|@translate}</div>
|
||||
<div class="applicationLink">
|
||||
<a title="{'On your Linux, simply install Shotwell with your package manager and the activate Piwigo publishing option.'|@translate}" class="buttonGradient" href="http://yorba.org/shotwell/" target="_blank">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/shotwell.png" title="{'Piwigo publish plugin for Shotwell'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/shotwell.jpg"></a></div>
|
||||
<p>{'Shotwell is an open source digital photo organizer that runs on Linux. It is the default photo manager in Ubuntu and Fedora.'|@translate}</p>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo publish plugin for digiKam'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/digikam.jpg">
|
||||
|
||||
<p>
|
||||
{'On your Linux, simply install Shotwell with your package manager and the activate Piwigo publishing option.'|@translate}
|
||||
<a href="http://yorba.org/shotwell/" target="_blank">{'Learn more'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> digiKam </div>
|
||||
<div class="applicationDesc">
|
||||
{'digiKam is an advanced digital photo management free software for Linux, Windows, and MacOSX.'|@translate}
|
||||
{'digiKam is designed for photographers who want to view, manage, edit, enhance, organize, tag, and share photographs.'|@translate}
|
||||
</div>
|
||||
<div class="applicationLink">
|
||||
<a title="{'To export your photos from digiKam to Piwigo, simply install digiKam and the Kipi-plugins.'|@translate}" class="buttonGradient" href="http://digikam.org/" target="_blank">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>digiKam</legend>
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/digikam.png" title="{'Piwigo publish plugin for digiKam'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/digikam.jpg"></a></div>
|
||||
<p>
|
||||
{'digiKam is an advanced digital photo management free software for Linux, Windows, and MacOSX.'|@translate}
|
||||
{'digiKam is designed for photographers who want to view, manage, edit, enhance, organize, tag, and share photographs.'|@translate}
|
||||
</p>
|
||||
<div class="applicationCard">
|
||||
<img title="MacShareToPiwigo" src="https://piwigo.org/screenshots/applications/thumbnail/macsharetopiwigo.jpg">
|
||||
|
||||
<p>
|
||||
{'To export your photos from digiKam to Piwigo, simply install digiKam and the Kipi-plugins.'|@translate}
|
||||
<a href="http://digikam.org/" target="_blank">{'Learn more'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> MacShareToPiwigo </div>
|
||||
<div class="applicationDesc"> {'Share / Send your photos directly from your Mac Os X (10.10 and following) to Piwigo'|@translate} </div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=804">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend>MacShareToPiwigo</legend>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo export plugin for iPhoto'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/iphoto.jpg">
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/macsharetopiwigo.jpg" title="MacShareToPiwigo"><img src="https://piwigo.org/screenshots/applications/thumbnail/macsharetopiwigo.jpg"></a></div>
|
||||
<p>{'Share / Send your photos directly from your Mac Os X (10.10 and following) to Piwigo'|@translate}</p>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> iPhoto </div>
|
||||
<div class="applicationDesc"> {'iPhoto is the default photo manager on MacOSX. The Piwigo export plugin let you create new albums and export your photos directly from iPhoto to your Piwigo photo gallery.'|@translate} </div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=592">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=804">{'Learn more'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class="applicationCard">
|
||||
<img title="{'Piwigo export plugin for Aperture'|@translate}" src="https://piwigo.org/screenshots/applications/thumbnail/aperture.jpg">
|
||||
|
||||
<fieldset>
|
||||
<legend>iPhoto</legend>
|
||||
<div class="textSide">
|
||||
<div class="applicationName"> Aperture </div>
|
||||
<div class="applicationDesc">
|
||||
{'Aperture is a powerful tool to refine images and manage massive libraries on Mac.'|@translate}
|
||||
{'Aperture is designed for professional photographers with iPhoto simplicity.'|@translate}
|
||||
{'The Piwigo export plugin allows you to create albums and export photos.'|@translate}
|
||||
</div>
|
||||
<div class="applicationLink">
|
||||
<a class="buttonGradient" target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=598">{'Learn more'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/iphoto.jpg" title="{'Piwigo export plugin for iPhoto'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/iphoto.jpg"></a></div>
|
||||
<p>{'iPhoto is the default photo manager on MacOSX. The Piwigo export plugin let you create new albums and export your photos directly from iPhoto to your Piwigo photo gallery.'|@translate}</p>
|
||||
|
||||
<p>
|
||||
<a target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=592">{'Learn more'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Aperture</legend>
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/aperture.png" title="{'Piwigo export plugin for Aperture'|@translate}"><img src="https://piwigo.org/screenshots/applications/thumbnail/aperture.jpg"></a></div>
|
||||
<p>
|
||||
{'Aperture is a powerful tool to refine images and manage massive libraries on Mac.'|@translate}
|
||||
{'Aperture is designed for professional photographers with iPhoto simplicity.'|@translate}
|
||||
{'The Piwigo export plugin allows you to create albums and export photos.'|@translate}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a target="_blank" href="http://piwigo.org/ext/extension_view.php?eid=598">{'Learn more'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
{*
|
||||
<fieldset>
|
||||
<legend>ReGalAndroid</legend>
|
||||
|
||||
<div class="illustration"><a href="https://piwigo.org/screenshots/applications/regalandroid.png" title="ReGalAndroid"><img src="https://piwigo.org/screenshots/applications/thumbnail/regalandroid.jpg"></a></div>
|
||||
<p>
|
||||
{'ReGalAndroid (RemoteGallery client for Android) is an open source (GPL v3) Piwigo client for the Android platform.'|@translate}
|
||||
{'Features include gallery browsing, album creation and photo upload.'|@translate}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{'Available on'|@translate} <a target="_blank" href="https://play.google.com/store/apps/details?id=net.dahanne.android.regalandroid">Google Play</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
*}
|
||||
</div>
|
||||
@@ -307,7 +307,8 @@ jQuery(document).ready(function(){
|
||||
<select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
|
||||
data-default="first" name="category" style="width:600px"></select>
|
||||
</span>
|
||||
<a href="#" data-add-album="category" class="orCreateAlbum"> {'... or '|@translate} {'create a new album'|@translate}</a>
|
||||
<span>{'... or '|@translate} </span>
|
||||
<a href="#" data-add-album="category" class="orCreateAlbum icon-plus-circled"> {'create a new album'|@translate}</a>
|
||||
</div>
|
||||
</fieldset>
|
||||
{*
|
||||
|
||||
@@ -4693,17 +4693,26 @@ fieldset#environment legend i[class*="icon-"] {
|
||||
#permissions {display: none!important;}
|
||||
#permissions, .selectFiles {margin-top: 35px; margin-bottom: 20px;}
|
||||
.selectAlbumBlock {display: flex; margin-left: 10px; margin-top: 10px;}
|
||||
/* .selectAlbumBlock span {
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
} */
|
||||
.icon-plus.cboxElement {
|
||||
padding: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); font-size: 15px; margin-bottom: 8px; transition: all 125ms ease-out;
|
||||
}
|
||||
.icon-plus.cboxElement:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);}
|
||||
#albumSelection {margin-right: 20px;}
|
||||
.orCreateAlbum{margin: 7px 0 9px 0; padding: 5px 10px; background: #f5f5f5; border-radius: 20px;}
|
||||
.orCreateAlbum{
|
||||
margin: 7px 0 9px 0;
|
||||
padding: 5px 10px;
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0px 2px #00000024;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.orCreateAlbum:hover {
|
||||
text-decoration: none;
|
||||
color: #3a3a3a;
|
||||
background: #dcdcdc;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.selectize-control.single .selectize-input {border-radius: 0; font-weight: bold;font-size: 12px;}
|
||||
.buttonLike {padding: 8px 10px; margin-left: 5px;}
|
||||
|
||||
Reference in New Issue
Block a user