Foorumi:YA:Uusi navigaatiovalikko

Jedipediasta, vapaasta Tähtien sota-tietosanakirjasta tänään, 29. tammikuuta 2026
Siirry navigaatioonSiirry hakuun
Foorumit > Arkistoidut yhteisöasiat > YA:Uusi navigaatiovalikko

Tämä keskustelu uudesta navigaatiovalikosta on arkistoitu. Älä muokkaa tätä sivua. Jos haluat aloittaa uuden keskustelun, tee se täällä. --miki-- Avaa yhteys 6. joulukuuta 2015 kello 15.17 (UTC)

Varmaan jotkut huomasivatkin suuren määrän tallennettuja tiedostoja tuoreissa muutoksissa. Tarkoituksenani on korvata etusivulla oleva, jo vanhentunut navigaatiovalikko kokonaan uudella. Testiversio löytyy täältä. Tämä navigaatiovalikko on jo ollut jonkin aikaa Wookieepediassa käytössä ja se on suoraan kopioitu sieltä. Toistaiseksi tuossa testiversiossa toimii vain osa valikoista, koska kaikkia tarvittavia kuvia ei ole vielä tallennettu. Se myös tarvitsee seuraavan css-koodin: 

/* Drop-down box functionality */
#dropd { text-align:center; }
#dropd ul {
	background: #D8E9FC; 
	padding: 0 10px;
	border-radius: 15px;
	margin: 0 5px;
	list-style: none;
	position: relative;
	display: inline-block;
}
#dropd ul li:hover { 
	background: #FFFFFF; 
	border-radius: 5px; 
}
#dropd ul li:hover > ul { display: block; }
#dropd ul li a { text-decoration: none; }
#dropd ul ul { 
	display: none;
	background: #bababa;
	border-radius: 15px; 
	padding: 7px 7px;
	position: absolute; 
	z-index: 100;
	max-width: 600px;
}
#dropd ul ul li:hover { background: #FFFFFF; }
 
li.topmenu { 
	display: inline-block;
	padding: 3px 5px;
}
.imglist {
	display: inline-block;
	font-size: 0;
	padding: 7px 0;
}
.reglist {
	font-size: 10pt;
	text-align: left;
	padding: 2px 2px;
	list-style: none;
}
.imglistreg {
	font-size: 10pt;
	padding: 7px 0;
	margin: 10px;
}
.imglist {
	display: inline-block;
	font-size: 0;
	padding: 7px 0;
}
.reglist a { padding: 2px 5px; }
.imglist-w a { padding: 2px 0; }
.imglist-h a { padding: 2px 0; }
 
/* Alignment tweaks for the classes used on the Main Page dropdowns */
.alignleft { left: 0%; }
.alignright { right: 0% }
 
/* Formatting for the Characters dropdown on the Main Page */
#icongallery { 
	padding: 0 5px;
	border-radius: 12px;  
	list-style: none;
	position: relative;
}
#icongallery > li {
	display: inline-block; 
	padding: 3px 1px;
}
 
/* limits max width of infobox and Main Page dropdown images to the template's defined max width */
.infoboximage img {
	max-width: 100%;
	height: auto;
}
.imglist-h img {
	max-height: 100%;
	width: auto;
}
.imglist-w img {
	max-width: 100%;
	height: auto;
}

Mielipiteitä? --miki-- Avaa yhteys 22. elokuuta 2015 kello 20.15 (UTC)

Tässä vaiheessa täytyy sanoa, että en koodin päälle ymmärrä juurikaan, mutta ilmeisesti homma on vielä vähän kesken. Jos siitä valmiinakin on tulossa tuollainen kilometrejä pitkä rimpsu, en kyllä hirveästi hurraata huutaisi. Idea on kuitenkin ihan hyvä, tiivistys ja ehkä esille nostettavia kohteita voidaan sitten miettiä vielä koko porukan kanssa. — X-wing (Keskustelu—Muokkaukset) 23. elokuuta 2015 kello 12.36 (UTC)
Taidan ymmärtää, mitä tarkoitat. Ilman ylläolevaa koodinpätkää se ei näy oikein. Otin kuitenkin kuvakaappauksen, josta näkyy, millainen sen on tarkoitus olla. --miki-- Avaa yhteys 23. elokuuta 2015 kello 13.49 (UTC)
Juu en ihan täysin ymmärtänyt, mitä koodi tekee muotoilulle :D Hyvältä vaikuttaa, ainakin minun puolestani. — X-wing (Keskustelu—Muokkaukset) 23. elokuuta 2015 kello 16.48 (UTC)
Mielenkiintoinen ja pääosin toimiva ratkaisu. Kiinnittäisin huomiota ns. mobiililaitteisiin (älypuhelimet ja taulutietokoneet), vaikkakin olen tietoinen siitä, että Jedipedian käytettävyys esim. älypuhelimilla on kaikkea muuta kuin huippuluokkaa. (Toivottavasti saamme MobileFrontendin kuntoon tämän vuoden aikana, niin se hieman helpottaa asiaa.)
Uusi navigaatiovalikko ei valitettavasti ole kovin käytettävä laitteilla, joiden pääasiallinen käyttöliittymä on perinteisen hiiren sijaan kosketusnäyttö. Nykyisellään valikot "laajenevat" käyttäjän pitäessä hiiren kursoria jonkin otsikon päällä (esim. "video games" ison W:n etusivulla)...mutta samalla kyseiset otsikot ovat toimivia linkkejä. Koska kosketusnäyttölaitteilla koskettaminen vastaa (laajalti) hiiren toimintaa, linkin koskettaminen avaa kyllä valikon, mutta samalla se toimii kuten linkin napsauttaminen hiirellä, eli käyttäjä "joutuu" linkin kohteeseen.
Hätä ei kuitenkaan ole tämännäköinen, koska apuun rientää JavaScript (ja jQuery):
$( function() {
	if (
		'ontouchstart' in window && // kosketusnäytöllinen laite
		mw.config.get( 'wgTitle' ) === mw.config.get( 'wgMainPageTitle' ) // etusivu
	)
	{
		$( '.topmenu > a' ).on( 'touchstart', function() {
			$( this ).off( 'touchstart' ).on( 'click', function( e ) {
				e.preventDefault();
			} );
			e.preventDefault();
		} );
	}
} );
Tämäkään ratkaisu ei ole täydellinen, sillä tätä koodia käytettäessä mobiilikäyttäjät eivät pysty seuraamaan navigaatiovalikon ns. otsikkolinkkejä, mutta ainakin suurin osa toiminnallisuudesta toimii. --Jack PhoenixShoutWiki Staff (Contact) 24. elokuuta 2015 kello 12.05 (UTC)
Itse asiassa kokeilin päivällä iPadilla, ja navigaatiovalikko toimi sillä hyvin ilman tuota koodia. Ensimmäinen kosketus avasi valikon, toinen samaan kohtaan avasi linkin. Sitä en tiedä, mikä on asian laita muilla laitteilla. Tämän allekirjoittamattoman kommentin jätti --miki-- (keskustelu – muokkaukset).
Kokeilin myös Lumia 925:llä, eikä se avannut valikkoa vaan linkin. --miki-- Avaa yhteys 25. elokuuta 2015 kello 19.41 (UTC)

Tämä valikko on nyt lisätty etusivulle. Koska siinä on useita kymmeniä kuvia, voi olla, että etusivu ei välttämättä lataudu ensimmäisellä kerralla, mutta F5 auttaa asiassa. --miki-- Avaa yhteys 15. lokakuuta 2015 kello 08.51 (UTC)

Huomasin. Tosin malline latautuu 4G-yhteydelläkin tooodeeeeellaaa hitaasti… Sille ei näemmä kuitenkaan voi mitään. Paitsi kuvia voi aina pienentää, tallentaa uudet, pienempiresoluutioiset kuvat. Jos siihen jaksaa ryhtyä. — X-wing (Keskustelu—Muokkaukset) 15. lokakuuta 2015 kello 10.58 (UTC)
Tuo malline lataa kuvat pienemmässä koossa kuin Wookieepedian vastaava juurikin tästä syystä, mutta alkuperäisen kuvan pienentäminen tuskin vaikuttaa asiaan. Myöhempien latauskertojen ei pitäisi olla niin hitaita, koska malline on siinä vaiheessa tallennettu välimuistiin. --miki-- Avaa yhteys 15. lokakuuta 2015 kello 11.16 (UTC)
Totta. Mutta annas kun välimuistin tyhjentää… Mitä teletapit sanoo? – Uudestaan! — X-wing (Keskustelu—Muokkaukset) 15. lokakuuta 2015 kello 14.05 (UTC)
Nyt löysin sellaisen ongelman, että iPadilla ei saa suljettua valikoita. Tämä ei kuitenkaan ole kovin suuri ongelma. --miki-- Avaa yhteys 19. lokakuuta 2015 kello 10.40 (UTC)
Lumia-puhelimella valikot eivät aukea lainkaan, ja tämä käsittääkseni on vähän isompi ongelma. — X-wing (Keskustelu—Muokkaukset) 19. lokakuuta 2015 kello 10.51 (UTC)
Tuo Jackin koodi ilmeisesti kaipaa parannusta. Tällä hetkellä se vain estää linkkien avaamisen, mutta ei tee mitään muuta. Ilman tuota koodiahan iPad avasi linkin toisella painalluksella ja Lumia suoraan, avaamatta valikkoa. --miki-- Avaa yhteys 19. lokakuuta 2015 kello 10.53 (UTC)
Noudettu kohteesta ”https://www.jedipedia.fi/w/index.php?title=Foorumi:YA:Uusi_navigaatiovalikko&oldid=203875”