search

DecentralizedAmateurPagingNetwork / Web

The default DAPNET Web-frontend.
MIT License
21 stars 10 forks source link

Welcome Page improvement #143

Closed dh3wr closed 6 years ago

dh3wr commented 6 years ago

Um die Startseite für Unbedarfte etwas deskriptiver zu gestalten, habe ich an ein Karusell gedacht. Z.B. https://ssense.github.io/vue-carousel/

Wie auf der IHF-Homepage wäre ein i18n verwalteter String für Title und Subtitle cool. Die Bildgröße würde auch wie beim IHF auf 400x400 festlegen.

Könnte man zum einfachen Austauschen ein directory machen, von dem dynamisch alle Bilder genommen werden? Dann muss natürlich die i18n Zuordnung passen. Oder man macht die i18n Stuktur so

"carusell": {
  "content1": {
    "title": "bla",
    "subtitle: "bla",
    "filename: "meincoolesbild.jpg"
  },
  "content2": {
    "title": "bla",
    "subtitle: "bla",
    "filename: "meinnochcooleresbild.jpg"
  }
}

Der Algorithmus würde dann für jedes Bild im dem Verzeichnis den Filenamen vergleichen mit dem i18n-File und wenn es ihn gibt, dann entsprechend das Bild samt Text darstellen.

Ist dazu aufwendig? Sonst beschänken wir uns auf Bild1 bis Bild6 mit festem Filename und fertig.

(Unschön natürlich im i18n-File Dateinamen zu haben)

dh3wr commented 6 years ago

Das impliziert auch ein bisschen Aufräumen auf der Startseite. Dazu mal mündlich ein paar Ideen.

menzerath commented 6 years ago

So ein Element kann ich einbauen, ob das aber so einfach über die i18n-Strings verwaltet werden kann, muss ich ausprobieren...

menzerath commented 6 years ago

Die von dir vorgeschlagene Bibliothek funktioniert folgendermaßen: In der Home.vue-Datei wird im <template>-Bereich das <carousel> angelegt, welches beliebig viele <slide>-Elemente beinhalten kann. Hier können auch die i18n-Funktionen verwendet werden.

Beispiel:

<carousel>
    <slide>
        <h1>{{ $t('home.welcome.title') }}</h1>
        <p v-html="$t('home.welcome.text')"></p>
    </slide>
    <slide>
        <img src="~@/assets/img/afu-dapnet-logo.png" alt="DAPNET Logo"/>
    </slide>
</carousel>

Angeblich können beliebige Elemente in diesen Slides verwendet werden (z.B. eine Karte, Statistiken, Diagramme, etc.). Ich pushe gleich einen ersten Test, der den bekannten Home-Text und das DAPNET-Logo beinhaltet und alle 5s das angezeigte Element wechselt.

dh3wr commented 6 years ago

Super. Man könnte man schauen, ob man tatsächlich die OSM-Karte dynamisch in die Show einbinden kann. Vielleicht dann noch zusätzlich einen Link für die Kartenansicht im Full-Screen, so wie hier: http://hamnetdb.net/ grafik

menzerath commented 6 years ago

Ich habe die 9 Bilder mit einem Dummy-Text (siehe i18n Dateien) eingepflegt.

dh3wr commented 6 years ago

Vielleicht noch die Pfeile am linken und rechten Rand aktivieren? Und Höhe 400 px?

menzerath commented 6 years ago

Vielleicht noch die Pfeile am linken und rechten Rand aktivieren?

Aktiviert.

Und Höhe 400 px?

Die Bibliothek orientiert sich am größten Element in den Slides. Ich kann die Größe von 400px erzwingen, allerdings werden dabei die Bilder auch nach 400px abgeschnitten...

dh3wr commented 6 years ago

Habe nur 400x400 px Bilder dir geschickt

menzerath commented 6 years ago

Öhm, dann läuft hier was anderes schief. Ich schau nochmal danach...

dh3wr commented 6 years ago

Die Texte außer von Bild1 kommen auch noch nicht..

menzerath commented 6 years ago

So, jetzt sollte es besser aussehen. Die Texte gehen bei mir alle...

dh3wr commented 6 years ago

@MarvinMenzerath Ich hatte "German" eingestellt...

dh3wr commented 6 years ago

Auf der mobilen Ansicht werden bei manchen Bildern die vorherigen links am Rand noch dargestellt und insg. ist das Carousel sehr hoch. screenshot_20180305-172913 screenshot_20180305-173002 screenshot_20180305-173009

dh3wr commented 6 years ago
menzerath commented 6 years ago

Auf der mobilen Ansicht werden bei manchen Bildern die vorherigen links am Rand noch dargestellt

Ich habe den Aufbau des Sliders ein wenig geändert, das sollte jetzt gefixt sein.

und insg. ist das Carousel sehr hoch

Die Höhe orientiert sich am höchsten Element des Ka­rus­sell, was hier der erste lange Text ist. Mit der vorherigen Änderung sollte auch das besser geworden sein.

Text bitte vertikal zentrieren

Ist nicht ohne Weiteres möglich und in der Form nicht von Bootstrap oder dem Ka­rus­sell vorgesehen. Generell sieht soetwas (mMn) komisch aus...

Soll die Hintergrundfarbe der Fotos an das leichte Grau der DAPNET-Oberfläche angepasst werden? Oder lieber transparent als PNG?

PNG wäre besser

Sind Links zu den einzelnen Bildern möglich?

Links sind im i18n-Text als normales Link-Element und jetzt auch über das link-Element in den i18n-Dateien zum Ka­rus­sell vorhanden.

dh3wr commented 6 years ago

Super mit den Links. Kann man da noch target blank rein machen? Im i18n oder im vue? PNGs mache ich in transparent

menzerath commented 6 years ago

Kann man da noch target blank rein machen?

Ist drin

Im i18n oder im vue?

In den i18n-Dateien gibt es zu jedem Karussell-Eintrag neben title und text auch einen link. Da muss die URL rein.

dh3wr commented 6 years ago

Ich meinte das ''target=''. Die Links sind schon drin. Hat sich also erledigt.