[PATCH 2 of 3] Changed page for responsive views (tablets)
Wald Commits
scm-commit at wald.intevation.org
Tue Jan 28 12:35:41 CET 2014
# HG changeset patch
# User Ariane Broermann <ariane at intevation.de>
# Date 1390908740 -3600
# Node ID 2d286f28acf9069929737fb3970183b55286138b
# Parent 6a78f347c2cd26877fda462c90207517165c8602
Changed page for responsive views (tablets).
diff -r 6a78f347c2cd -r 2d286f28acf9 index.html
--- a/index.html Tue Jan 28 12:29:35 2014 +0100
+++ b/index.html Tue Jan 28 12:32:20 2014 +0100
@@ -39,90 +39,96 @@
</ul>
</div>
</div><!-- /navbar -->
-
- <div class="container">
- <div class="row-offcanvas row-offcanvas-right">
+ <div class="row row-dive4elements row-dive4elements-right">
+ <div class="col-xs-12 col-sm-6 col-md-8">
+ <p class="pull-right visible-xs">
+ <button type="button" class="btn btn-primary btn-xs"
+ data-toggle="dive4elements">News Feed</button>
+ </p>
<p class="lead"> Dive4Elements ist eine datenbankbasierte Webapplikation zur raum-zeitlichen Analyse von Fachdaten der 4 Elemente (Feuer, Wasser, Luft und Erde). Dive steht für Digging, Investigating, Viewing, Exporting.
Dive4Elements gewährt webbasiert den Zugriff auf Datenmodelle in einem zentralen Datawarehouse und bietet die Möglichkeit zur Analyse, Visualisierung der Daten sowie Exportmöglichkeiten in offene Formate.
</p>
-
<div class="jumbotron">
<p class="lead">Dive4Elements River oder auch FLYSS - Flusshydrologische Software</p>
<p><a class="btn btn-lg btn-success" href="#" role="button">Get it</a></p>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide data-ride="carousel"">
- <!-- Carousel items -->
- <div class="carousel-inner">
- <div class="item active">
- <img src="img/screenshot1.png" alt="1. Bild" class="img-responsive">
- <div class="carousel-caption">
- <p>Titel und ggf. kurze Erläuterung </p>
+ <!-- Carousel items -->
+ <div class="carousel-inner">
+ <div class="item active">
+ <img src="img/bezugslinie_saar_748x400_ausschnitt.png" alt="1. Bild" class="img-responsive">
+ <div class="carousel-caption">
+ <p>Titel und ggf. kurze Erläuterung </p>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/fix-a_saar_748x400_ausschnitt.png" alt="2. Bild" class="img-responsive">
+ <div class="carousel-caption">
+ <p>Titel und ggf. kurze Erläuterung </p>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/uesk_koblenz_hq-extrem_748x400.png" alt="3. Bild" class="img-responsive">
+ <div class="carousel-caption">
+ <p>Titel und ggf. kurze Erläuterung </p>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/wspl_rhein_748x400_ausschnitt.png" alt="4. Bild" class="img-responsive">
+ <div class="carousel-caption">
+ <p>Titel und ggf. kurze Erläuterung </p>
+ </div>
+ </div>
+ <div class="item">
+ <img src="img/uesk_koblenz_hq-extrem_580x310_ausschnitt.png" alt="5. Bild" class="img-responsive">
+ <div class="carousel-caption">
+ <p>Titel und ggf. kurze Erläuterung </p>
+ </div>
</div>
</div>
- <div class="item">
- <img src="img/screenshot2.png" alt="2. Bild" class="img-responsive">
- <div class="carousel-caption">
- <p>Titel und ggf. kurze Erläuterung </p>
- </div>
- </div>
- <div class="item">
- <img src="img/screenshot3.png" alt="3. Bild" class="img-responsive">
- <div class="carousel-caption">
- <p>Titel und ggf. kurze Erläuterung </p>
- </div>
- </div>
- <div class="item">
- <img src="img/screenshot5.png" alt="4. Bild" class="img-responsive">
- <div class="carousel-caption">
- <p>Titel und ggf. kurze Erläuterung </p>
- </div>
- </div>
- <div class="item">
- <img src="img/screenshot8.png" alt="5. Bild" class="img-responsive">
- <div class="carousel-caption">
- <p>Titel und ggf. kurze Erläuterung </p>
- </div>
- </div>
+ <!-- Carousel nav -->
+ <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="prev"></span></a>
+ <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="next"></span></a>
+ </div><!-- /myCarousel -->
+ </div><!-- /jumbobutton-->
+
+ <div class="row marketing">
+ <div class="col-lg-6">
+ <h4>Was ist Dive4Elements River?</h4>
+ <p>Es folgt der Text.</p>
</div>
- <!-- Carousel nav -->
- <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="prev"></span></a>
- <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="next"></span></a>
- </div><!-- /myCarousel -->
- </div><!-- /jumbobutton-->
+ <div class="col-lg-6">
+ <h4>Visualisierung und Analyse</h4>
+ <p>Es folgt der Text.</p>
+ </div>
+ </div><!-- /row marketing -->
- <div class="row marketing">
- <div class="col-lg-6">
- <h4>Was ist Dive4Elements River?</h4>
- <p>Es folgt der Text.</p>
+ <div class="jumbotron">
+ <p>Dive4Elements Ocean (GNV)</p>
</div>
- <div class="col-lg-6">
- <h4>Visualisierung und Analyse</h4>
- <p>Es folgt der Text.</p>
- </div>
- </div><!-- /row -->
-
- <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
- <div class="news_feed">
- <p>News</p>
- </div>
- </div><!-- /sidebar -->
-
- <div class="jumbotron">
- <p>Dive4Elements Ocean (GNV)</p>
- </div>
+ </div><!-- /col-xs-12 -->
- </div><!-- /container -->
+ <div class="col-xs-6 col-md-4 sidebar-dive4elements">
+ <div class="news feed">
+ <p>News Feed</p>
+ </div><!-- /news feed -->
+ </div><!-- /col-xs-6 -->
+ </div><!-- /row -->
<div class="footer">
© 2011 Intevation GmbH <br>
Dive4Elements ist lizensiert unter der <a href=
"http://www.gnu.org/licenses/lgpl-2.1.html">GNU LGPL v2.1</a>.
- </div>
+ </div><!-- /footer -->
</div> <!-- /container -->
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.0.3/dist/js/bootstrap.min.js"></script>
+ <script src="js/dive4elements.js"></script>
</body>
</html>
More information about the Dive4elements-commits
mailing list