@wikimedia/codex
Version:
Codex Design System for Wikimedia
2 lines (1 loc) • 4.16 kB
JavaScript
import{d as u,f as g,w as i,aO as b,o as w,p as s,e as o,i as t,am as r,aP as k}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-ChPp1b9F.js";/* empty css */import{a as n,C as d}from"./Message-ByfBfR2p.js";import{b as f}from"./Table-BeNlMuNS.js";import"./useFloatingMenu-lGCYR9Tn.js";import"./floating-ui.dom-G9leGyGp.js";import"./Button-DrTkl5TI.js";const c={class:"cdx-demo-word-break-page__cards"},h={class:"cdx-demo-word-break-page__messages",lang:"en"},l="123.45.6.789",x=u({__name:"WordBreakDemo",setup(v){const m=[{id:"user",label:"User"},{id:"ip",label:"IP(s)"},{id:"userAgent",label:"User Agent(s)",minWidth:"300px"}],a=["Abc","Twoword Username","Shortish","123.45.6.789","Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft","PascalCase"],p=[{user:a[0],ip:l,userAgent:"Mozilla/5.0 (Windows NT 10.0; Win64, x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 [10]"},{user:a[1],ip:"123456789",userAgent:"Do you have pneumonoultramicroscopicsilicovolcanoconiosis?"},{user:a[2],ip:l,userAgent:"One of the longest known German words is Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft."},{user:a[3],ip:l,userAgent:"Visit https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg"},{user:a[4],ip:l,userAgent:"I am 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 years old."}];return(y,e)=>(w(),g(b,{class:"cdx-demo-word-break-page"},{header:i(()=>e[0]||(e[0]=[s(" Word break demos ")])),content:i(()=>[e[13]||(e[13]=o("h2",null,"Cards",-1)),e[14]||(e[14]=o("p",null,"Shrink the viewport to see how the text responds on smaller screens.",-1)),o("div",c,[t(r(n),{lang:"en"},{title:i(()=>e[1]||(e[1]=[s("Long English word")])),description:i(()=>e[2]||(e[2]=[s("Do you have pneumonoultramicroscopicsilicovolcanoconiosis?")])),_:1}),t(r(n),{lang:"de"},{title:i(()=>e[3]||(e[3]=[s("Long German word")])),description:i(()=>e[4]||(e[4]=[s("One of the longest known German words is Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.")])),_:1}),t(r(n),{lang:"en"},{title:i(()=>e[5]||(e[5]=[s("URL")])),description:i(()=>e[6]||(e[6]=[s("Visit https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg")])),_:1}),t(r(n),{lang:"en"},{title:i(()=>e[7]||(e[7]=[s("Long number")])),description:i(()=>e[8]||(e[8]=[s("I am 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789 years old.")])),_:1})]),e[15]||(e[15]=o("h2",null,"Messages",-1)),o("div",h,[e[11]||(e[11]=o("p",null," From the English Wikipedia create account page on mobile; see T353005. A max-width of 290px is applied to mimic very small mobiles and the max-width set on larger screens. ",-1)),t(r(d),{class:"cdx-demo-word-break-page__messages--enwiki"},{default:i(()=>e[9]||(e[9]=[o("p",null,[o("strong",null,"Wikipedia is made by people like you.")],-1),o("p",null,"Log in to continue.",-1)])),_:1}),e[12]||(e[12]=o("p",null," From the IDM/Bitu create account page; see T376648. A max-width of 470px is set to mimic the max-width of that message on desktop. ",-1)),t(r(d),{class:"cdx-demo-word-break-page__messages--bitu"},{default:i(()=>e[10]||(e[10]=[s(" When you create or use a "),o("a",{href:"https://www.mediawiki.org/wiki/Special:MyLanguage/Developer_account"},"Wikimedia developer account",-1),s(", some information becomes visible to other users of "),o("a",{href:"https://wikitech.wikimedia.org/wiki/Special:MyLanguage/Help:Cloud_Services_introduction"},"Wikimedia Cloud Services",-1),s(". Specifically, the email address linked to your account will be publicly visible. Additionally, when you connect to virtual machines in Wikimedia Cloud VPS using SSH, your IP address will be recorded. This information might be visible to other users of Cloud VPS or Toolforge. ")])),_:1})]),e[16]||(e[16]=o("h2",null,"Table",-1)),t(r(f),{class:"cdx-demo-word-break-page__table",caption:"User data",columns:m,data:p})]),_:1}))}});k(x).mount("#app");