Portal:Mars/styles

[Verwendung]   [CSS bearbeiten]

Diese Seite dokumentiert TemplateStyles betreffend Portal:Mars.

CSS

.PortalMars-linkeSpalte {
  padding: 0.25em; 
  vertical-align: top; 
  /*width: 60%;*/
}

.PortalMars-mittlereSpalte {
  padding: 0.25em; 
  vertical-align: top; 
  width: 60%;
}

.PortalMars-rechteSpalte {
  padding: 0.25em; 
  vertical-align: top;
}

.PortalMars-linkerHeader {
  padding: 0.25em;
  background-color: #ff7733;
  border: 2px solid #7F0000;
  margin-bottom: 50px;
}

.PortalMars-rechterHeader {
}

@media screen and (max-width: 44.001em) {
  /* kleiner Bildschirm */
  .PortalMars-rechterHeader, 
  .PortalMars-rechteSpalte, 
  .PortalMars-mittlereSpalte {
    display: none;
  }
}

@media screen and (min-width: 44.001em) {
  /* großer Bildschirm */
  .PortalMars-linkeSpalte,
  .PortalMars-linkerHeader {
    display: none;
  }
}

.PortalMars-box {
  width: 100%;
  height: 1.3em;
  padding: 0 0.25em 0.25em;
  margin: 0 0 0.1em -0.3em;
  color: white;
  background-color: #7F0000;
  border: 2px solid #7F0000; 
  overflow: hidden;
  transition: 1s;
}

.PortalMars-box:hover {
  height: 15em;
  overflow: auto;
  /*padding: 0.25em; */
  color: black;
  background-color: #ff7733;
}

.PortalMars-boxHeader {
  /*color: white;*/ 
  font-size: 1.1em;
}

Kopiervorlage

<templatestyles src="Portal:Mars/styles.css" />

---

Portal:Mars/styles.css steuert das Aussehen des Portal:Mars, einschließlich der Seite Portal:Mars/Mitarbeit. Es wird für gängige Endgeräte eine flexible Anordnung der Boxen angestrebt, so dass auf (großen) Desktopmonitoren ein ein/zweispaltiges Layout angezeigt wird, auf (schmalen) Mobilgeräten dagegen ein rein einspaltiges Layout.

Die Umsetzung erfolgt mit der TemplateStyles-Funktionalität von MediaWiki. Damit sind seit 2018 auch modernere CSS-Anweisungen möglich, insbesondere sogenannte „Media Queries“.

Auf der Seite Wikipedia:Technik/Skin/CSS/TemplateStyles wurde das projektweit eindeutige Klassenpräfixe PortalMars- für diese Seite reserviert. Eingesetzt wurde es für: PortalMars-linkerHeader, PortalMars-linkeSpalte, PortalMars-mittlereSpalte, PortalMars-rechteSpalte, sowie PortalMars-boxHeader und PortalMars-box.

Funktionsbeschreibung

Das Portal Mars konstruiert das Layout mit Hilfe einer zweispaltigen Tabelle, in die die Inhalte - die auf Portal-Unterseiten stehen - per Portal:Mars/Box eingebunden werden (stimmt hoffentlich). Die beiden Boxen am Kopf der Seite werden per colspan=2 über beide Spalten hinweg ausgebreitet. Der für das Portal gewählte Ansatz besteht darin, dass für den Kopf-Bereich und den Haupt-Bereich jeweils eine zusätzliche Tabellenspalte angelegt wird. Dies geschieht auf der Seite Portal:Mars. Jede Spalte erhält eine eigene class, die in der css-Datei Portal:Mars/styles.css beschrieben werden. In den zusätzlichen Tabellenspalten - gekennzeichnet mit PortalMars-linkerHeader und PortalMars-linkeSpalte - werden die Inhalte eingetragen, die z.B. im Smartphone angezeigt werden sollen, während die Inhalte für den großen Bildschirm in den Tabellenspalten stehen, die gekennzeichnet sind mit ...-mittlereSpalte oder ...-rechteSpalte.

Das Umschalten zwischen dem kleinen und dem großen Bildschirm erfolgt mittels @media in der css-Datei (Portal:Mars/styles.css). Auf dem kleinen Bildschirm werden dazu die mittlere Spalte und die beiden rechten Spalten abgeschaltet (display:none) und auf dem großen Bildschirm werden die linken Spalten abgeschaltet.

Damit auf dem kleinen Bildschirm nicht zu viel Inhalt auf einmal angezeigt wird, werden die Inhalts-Boxen eingeklappt. Die Aufgabe übernehmen PortalMars-boxHeader und PortalMars-box. Genutzt wird dazu CSS transition, mit dem HTML-Elemente animiert werden können. Der Ansatz besteht darin, dass ein kleines, farbiges Rechteck auf den Bildschirm gemalt wird, in dem der anzuzeigende Text eingefügt wird. Natürlich passt nicht der ganze Text in das Rechteck, der über das Rechteck hinausgehende Textteil wird abgeschnitten, so dass nur die erste Zeile des Textes zu sehen ist, die damit zur Überschrift wird. Wird das Rechteck mit dem Finger oder der Maus berührt, dann wird aus dem kleinen Rechteck ein großes Rechteck und damit kann nun mehr als nur die Überschrift angezeigt werden. . Reicht der Platz immer noch nicht für den vollständigen Platz aus, kann man den Text scrollen.