commit 15b9bd9aebc09456b2d02906b29275a879a9dd84
parent df130f0d42fad3324f17ed5a4f44883541efb928
Author: Leah Thein <leah@toaster.fritz.box>
Date: Fri, 4 Dec 2020 17:42:09 +0100
parent df130f0d42fad3324f17ed5a4f44883541efb928
Author: Leah Thein <leah@toaster.fritz.box>
Date: Fri, 4 Dec 2020 17:42:09 +0100
frist steps in backporting new design
4 files changed, 201 insertions(+), 296 deletions(-)
M
|
404
+++++++++++++++++++++++++++++++------------------------------------------------
M
|
80
++++++++++++++++++++++++++++++++-----------------------------------------------
diff --git a/assets/style.css b/assets/style.css @@ -6,9 +6,6 @@ font-face { font-style: normal; } -a { - color: inherit; -} html, body { margin: 0; font-family: Varela, sans-serif; @@ -18,6 +15,10 @@ html, body { overflow-y: visible; } +a { + color: inherit; +} + * { box-sizing: border-box; border-collapse: collapse; @@ -85,23 +86,6 @@ header { 100% { transform: rotate(360deg); } } -label[for=btn-history] { - cursor: pointer; - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); - border-radius: 100%; - height: 48px; - width: 48px; - background-color: #eee; - margin: .5em auto; - transition: box-shadow 150ms; - border: 1px solid rgba(0, 0, 0, .1); - user-select: none; -} - -:checked ~ label[for=btn-history] { - transform: rotate(180deg); -} - .loadMore { cursor: pointer; content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); @@ -127,9 +111,17 @@ label[for=btn-history] { table { border-bottom: 1px solid rgba(0, 0, 0, 0.3); width: 100%; + background-color: #fff; + min-width: 390px; + max-width: 1000px; } - -table, tr { +div.card { + overflow-x: auto; +} +tbody tr { + border-top: 1px solid #ccc; +} +tr { background-color: #fff; margin: 0 0 15px 0; } @@ -143,9 +135,9 @@ th { padding: 5px 3px; } - -tr:nth-child(odd) { - background-color: #f2f2f2; + +thead tr:not(:last-child) { + background-color: #eee; } @@ -182,6 +174,26 @@ tbody tr:hover td { border-radius: 3px 3px 0px 0px; } + .input-group { + box-shadow: 0 .1em .2em rgba(0, 0, 0, .5); + } + + .input-group input[type="text"] { + border-radius: 0px; + margin-top: 0px; + border-bottom: 1px solid #ddd; + box-shadow: none; + } + + .input-group input:nth-child(2) { + border-radius: 3px 3px 0px 0px; + } + + .input-group input:nth-last-child(2) { + border-radius: 0px 0px 3px 3px; + } + + .btn, .selector label { cursor: pointer; @@ -214,114 +226,41 @@ tbody tr:hover td { display: none; } - input[id=national] + label[for=national] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 15.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V5c0-3.5-3.58-4-8-4s-8 .5-8 4v10.5zm8 1.5c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-7H6V5h12v5z"/></svg>'); - background: #d3d3d3; - } - - input[id=national]:checked + label[for=national] { - background: #fff; - } - - - input[id=regional] + label[for=regional] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>'); - background: #d3d3d3; - } - - input[id=regional]:checked + label[for=regional] { - background: #fff; - } - - - input[id=suburban] + label[for=suburban] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>'); - background: #d3d3d3; - } - - input[id=suburban]:checked + label[for=suburban] { - background: #fff; - } - - - input[id=subway] + label[for=subway] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0v24h24V0H0zm22 22H2V8.86C2 6.05 3.53 3.84 6.2 2.8 8 2.09 10.14 2 12 2c1.86 0 4 .09 5.8.8C20.47 3.84 22 6.05 22 8.86V22z" fill="none"/><circle cx="15.5" cy="16" r="1"/><circle cx="8.5" cy="16" r="1"/><path d="M7.01 9h10v5h-10zM17.8 2.8C16 2.09 13.86 2 12 2c-1.86 0-4 .09-5.8.8C3.53 3.84 2 6.05 2 8.86V22h20V8.86c0-2.81-1.53-5.02-4.2-6.06zm.2 13.08c0 1.45-1.18 2.62-2.63 2.62l1.13 1.12V20H15l-1.5-1.5h-2.83L9.17 20H7.5v-.38l1.12-1.12C7.18 18.5 6 17.32 6 15.88V9c0-2.63 3-3 6-3 3.32 0 6 .38 6 3v6.88z"/></svg>'); - background: #d3d3d3; - } - - input[id=subway]:checked + label[for=subway] { - background: #fff; - } - - - input[id=tram] + label[for=tram] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M19 16.94V8.5c0-2.79-2.61-3.4-6.01-3.49l.76-1.51H17V2H7v1.5h4.75l-.76 1.52C7.86 5.11 5 5.73 5 8.5v8.44c0 1.45 1.19 2.66 2.59 2.97L6 21.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 20h-.08c1.69 0 2.58-1.37 2.58-3.06zm-7 1.56c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm5-4.5H7V9h10v5z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>'); - background: #d3d3d3; - } - - input[id=tram]:checked + label[for=tram] { - background: #fff; - } - - - input[id=bus] + label[for=bus] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6H6V6h12v5z"/></svg>'); - background: #d3d3d3; - } - - input[id=bus]:checked + label[for=bus] { - background: #fff; - } - - - input[id=ferry] + label[for=ferry] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2s3.02-.88 4-2c.98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78s-.34-.42-.6-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.26.08-.48.26-.6.5s-.15.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z"/></svg>'); + .selector input + label { background: #d3d3d3; } - input[id=ferry]:checked + label[for=ferry] { + .selector input:checked + label { background: #fff; } - - input[id=taxi] + label[for=taxi] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5H15V3H9v2H6.5c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>'); - background: #d3d3d3; - } - - input[id=taxi]:checked + label[for=taxi] { - background: #fff; - } - - - - input[id=accessibilityNone] + label[for=accessibilityNone] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/></svg>'); - background: #d3d3d3; - } - - input[id=accessibilityNone]:checked + label[for=accessibilityNone] { - background: #fff; - } - - - input[id=accessibilityPartial] + label[for=accessibilityPartial] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/></svg>'); - background: #d3d3d3; + .selector label { + font-weight: bold; + font-size: 0; + display: flex; + justify-content: center; + align-items: center; } - - input[id=accessibilityPartial]:checked + label[for=accessibilityPartial] { - background: #fff; + .selector label:after { + font-size: .9rem; + color: black; + text-align: center; + line-height: .9rem; } - - input[id=accessibilityComplete] + label[for=accessibilityComplete] { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"/></svg>'); - background: #d3d3d3; + .selector label.icon-ice, + .selector label.icon-ic, + .selector label.icon-icice, + .selector label.icon-dzug, + .selector label.icon-regional { + font-style: italic; } - input[id=accessibilityComplete]:checked + label[for=accessibilityComplete] { - background: #fff; + .selector label.icon-tram:after, + .selector label.icon-bus:after, + .selector label.icon-ferry:after, + .selector label.icon-taxi:after { + font-size: 0.6rem; } .switch { @@ -397,8 +336,6 @@ tbody tr:hover td { .search { color: white; - display: flex; - flex-direction: column; } .search table { @@ -425,6 +362,10 @@ tbody tr:hover td { } @supports (display: flex) { + .search>.title { + margin-bottom: 20px; + } + .search>.title>.logo { box-shadow: 0 .1em .2em rgba(0, 0, 0, .5); background-color: #7171e5; @@ -479,13 +420,13 @@ tbody tr:hover td { padding: 5px 3px; display: flex; justify-content: center; + align-items: center; width: 100%; text-decoration: none; color: black; } .journeys a.details-button { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>'); height: 30px; padding: 0; } @@ -498,11 +439,6 @@ tbody tr:hover td { border-bottom: 1px solid rgba(0, 0, 0, .2); } -.journey p { - color: white; - width: 100%; -} - .journey p::before { filter: drop-shadow( 0 0 5px rgba(0, 0, 0, .6) ); margin-right: 4px; @@ -512,6 +448,7 @@ tbody tr:hover td { .journey p.change, .journey p.walk, .journey p.transfer { + color: #fff; text-shadow: 0 0 15px rgba(0, 0, 0, .6); text-align: center; } @@ -599,9 +536,14 @@ tbody tr:hover td { } .search { - width: 80vw; - max-width: 700px; - color: white; + width: 90vw; + max-width: 750px; + background-color: rgba(67, 160, 71); + box-shadow: 0 .1em .2em rgba(0, 0, 0, .5); + padding: 20px; + display: flex; + flex-direction: column; + border-radius: 3px; } .search #date { @@ -643,7 +585,7 @@ tbody tr:hover td { display: none !important; } - label[for=from], label[for=to], label[for=isarr], label[for="date"], label[for=time] { + label[for=from], label[for=via], label[for=to], label[for=isarr], label[for="date"], label[for=time] { display: none; } } @@ -660,154 +602,127 @@ tbody tr:hover td { } -.modal { - display: flex; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; - overflow: hidden; - -webkit-overflow-scrolling: touch; - outline: 0; +.station-column { + style="width: 60%;" } -.modal-alert { - margin: auto; - border-radius: 4px; - background-color: white; - width: fit-content; - width: -moz-fit-content; - padding: 15px; - box-shadow: 0 1px 4px rgba(0, 0, 0, .6); +.icon-ice:after { + content: 'ICE'; } -.dismiss { - content: 'OK'; - border-radius: 4px; - background-color: rgba(20, 30, 255, .7); - color: white; - width: fit-content; - width: -moz-fit-content; - padding: 8px 20px; - margin-left: auto; - margin-top: 10px; - transition: background-color 300ms; +.icon-ic:after { + content: 'IC'; } -.dismiss:hover { - background-color: rgba(70, 100, 255, .8); - cursor: pointer; +.icon-icice:after { + content: 'IC ICE'; } -.modal-header { - background-color: #43a047; - color: white; - border-radius: 6px 6px 0px 0px; - min-height: 16.4; - padding: 15px; - border-bottom: 1px solid #e5e5e5; +.icon-dzug:after { + content: 'D'; } -.modal-header .close { - margin-top: -2px; +.icon-regional:after { + content: 'NV'; } -.modal-header .modal-close { - width:53px; - float:right; - margin:-15px; - margin-left:0px; - height:53px; - border-left: 1px solid #00000040; +.icon-suburban:after { + content: 'S'; +} - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAABO0lEQVR42u3bURKDIAwEUNiLoyfXC3Ss4mYTh81Xv4R90wqEad+2ra1caIuXAQxgAAMYwAAGMIABDGAAA0zVGOMYYxzqibPGxdtJ/PqsCM8aF4xJKBHY40IxwcrPngbY970rJ3r1zKu5hH4DVAhR4Sk/gWiEyPC0d0AUQnR46kuQjaAIT18FWAiq8CHL4FsEZfiws8Asgjp86GHoKUJG+PDT4F2ErPCttdYVd4OzS2F0eFk/YCaIIry0IfIkkCq8FOBuMGV4OUDFkgK83Qh9GoC1Ff4kAPsw9CmAf5scdWdJCnB3h5eJgOzw2QioED4TAVXCZyGgUvgMBFQLr0ZAxfBKBFQNr0JA5fAKBFQPH40gbYtXfDb1dljRzGCPS7sdVnZymON2/2Nk8TKAAQxgAAMYwAAGMIABDLBmnWRS+u5G6HkFAAAAAElFTkSuQmCC') center no-repeat; - background-size:30px; - cursor:pointer; +.icon-subway:after { + content: 'U'; } -.modal-header .modal-close:hover { - border-radius: 0px 6px 0px 0px; +.icon-tram:after { + content: 'Tram'; } -.modal-title { - margin: 0; - line-height: 1.4; +.icon-bus:after { + content: 'Bus'; } -.modal-dialog { - position: relative; - width: auto; - margin: 10px; +.icon-ferry:after { + content: 'Ferry'; } -.modal-content { - position: relative; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, .2); - border-radius: 6px; - outline: 0; - box-shadow: 0 3px 9px rgba(0, 0, 0, .5); +.icon-taxi:after { + content: 'Taxi'; } -.modal-body { - position: relative; +.icon-back { + content: url('data:image/svg+xml;utf8,<svg height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g color="white"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="currentColor"></path></g></svg>'); } -@media (min-width: 768px) { - .modal-dialog { - width: 600px; - margin: 30px auto; - } +.icon-reload { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); +} - .modal-content { - box-shadow: 0 5px 15px rgba(0, 0, 0, .5); - } +.icon-hint { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'); } -.row.history:first-child { - border-top: 0px; +.icon-status { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>'); } -form>div.history { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .4); - border-radius: 5px; - overflow: hidden; - display: none; - margin-bottom: 1em; +.icon-other { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>'); } -:checked ~ .history { - display: block; + +.icon-arrow1 { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>'); } -.row.history { - font-size: 1.2em; - background-color: white; - color: black; - margin: 0; - border-top: 1px solid rgba(0, 0, 0, .2); - padding: .3em .6em .3em .3em; - cursor: pointer; - display: flex; - justify-content: space-between; +.icon-arrow2 { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); } -.history.from, -.history.to { - width: 40%; +.icon-arrow3 { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>'); } -.history.to { - text-align: right; + +.icon-swap { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); } -.history.arrow { - content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24 H0z" fill="none"/></svg>'); - width: 25px; +.icon-settings { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><g><path d="M0,0h24v24H0V0z" fill="none"/><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></g></svg>'); } -.station-column { - style="width: 60%;" +.icon-walk-fast { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/></svg>'); +} + +.icon-walk { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"/></svg>'); +} + +.icon-wheelchair { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="4" r="2"/><path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z"/></svg>'); +} + +.icon-logo { + content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: white;" d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path fill="none" d="M0 0h24v24H0V0z"/></svg>') +} + +.icon-travelynx { + content: url('./img/travelynx.svg'); } + + + + + +.train-details { + display: flex; + justify-content: center; +} + +.journey thead>tr:nth-child(2) { + border-bottom: 2px solid #ccc; +} + +.train-detail { + margin: .4em 2em; +} + \ No newline at end of file
diff --git a/templates/journey.tpl b/templates/journey.tpl @@ -1,4 +1,4 @@ - <!DOCTYPE html> +<!DOCTYPE html> <html lang="de"> <head> <title>Öffisearch</title> @@ -28,7 +28,7 @@ <p class="walk">{{LABEL_GO_TO}} {{ARRIVAL_POINT}} ({{LABEL_APPRX}} {{DISTANCE}} {{LABEL_METERS}})</p> {{/IS_WALKING}} {{#IS_TRANSVER}} - <p class="transfer">{{LABEL_TRAVEL_TO}} {{ARRIVAL_POINT}}</p> + <p class="transfer ">{{LABEL_TRAVEL_TO}} {{ARRIVAL_POINT}}</p> {{/IS_TRANSVER}} {{#IS_CHANGE}} <p class="change">{{DURATION}} {{LABEL_CHANGE_DURATION}}</p> @@ -42,6 +42,11 @@ </td> </tr> <tr> + <td colspan="4"> + <span>{{LABEL_DURATION}}: {{LEG_DURATION}}</span> + </td> + </tr> + <tr> <th>{{LABEL_ARRIVAL}}</th> <th>{{LABEL_DEPARTURE}}</th> <th class="station-column">{{LABEL_STATION}}</th> @@ -66,6 +71,6 @@ {{/LEGS}} <div id="overlay" class="hidden"></div> - <script type="module" src="/assets/js/journeys.js" defer></script> + <script type="module" src="/assets/js/journey.js" defer></script> </body> </html>
diff --git a/templates/journeys.tpl b/templates/journeys.tpl @@ -43,7 +43,7 @@ <td><span>{{DURATION}}</span></td> <td><span>{{CHANGES}}</span></td> <td><span>{{PRODUCTS}}</span></td> - <td><a class="details-button" href="/{{REQ_ID}}/{{ID}}">{{LABEL_DETAILS}}</a></td> + <td><a class="details-button icon-arrow3" href="/{{REQ_ID}}/{{ID}}">{{LABEL_DETAILS}}</a></td> </tr> {{/JOURNEYS}} </tbody>
diff --git a/templates/search.tpl b/templates/search.tpl @@ -21,13 +21,21 @@ <div class="logo"></div> <h1>Öffisearch</h1> </div> - <label for="from">{{LABEL_FROM}}:</label> - <input type="text" name="from" id="from" placeholder="{{LABEL_FROM}}" autocomplete="off" required> - <div class="suggestions" id="fromSuggestions"></div> - <label for="to">{{LABEL_TO}}:</label> - <input type="text" name="to" id="to" placeholder="{{LABEL_TO}}" autocomplete="off" required> - <div class="suggestions" id="toSuggestions"></div> + <div class="input-group"> + <label for="from">{{LABEL_FROM}}:</label> + <input type="text" name="from" id="from" placeholder="{{LABEL_FROM}}" autocomplete="off" required> + <div class="suggestions" id="fromSuggestions"></div> + + <label for="via">{{LABEL_VIA}} ({{LABEL_OPTIONAL}}):</label> + <input type="text" name="via" id="via" placeholder="{{LABEL_VIA}} ({{LABEL_OPTIONAL}})" autocomplete="off"> + <div class="suggestions" id="viaSuggestions"></div> + + <label for="to">{{LABEL_TO}}:</label> + <input type="text" name="to" id="to" placeholder="{{LABEL_TO}}" autocomplete="off" required> + <div class="suggestions" id="toSuggestions"></div> + + </div> <div class="row"> <label class="switch"> @@ -45,42 +53,49 @@ <div class="row"> <span class="hidden">{{LABEL_PRODUCTS}}:</span> + <div class="selector"> + <input type="checkbox" id="nationalExp" name="nationalExp" checked> + <label class="icon-ice" for="nationalExp" title="{{LABEL_ICE}}">{{LABEL_ICE}}<br></label> + <input type="checkbox" id="national" name="national" checked> - <label for="national" title="{{LABEL_HIGHSPEED_TRAIN}}">{{LABEL_HIGHSPEED_TRAIN}}<br></label> + <label class="icon-ic" for="national" title="{{LABEL_IC}}">{{LABEL_IC}}<br></label> + + <input type="checkbox" id="regionalExp" name="regionalExp" checked> + <label class="icon-dzug" for="regionalExp" title="{{LABEL_DZUG}}">{{LABEL_DZUG}}<br></label> <input type="checkbox" id="regional" name="regional" checked> - <label for="regional" title="{{LABEL_REGIONAL_TRAIN}}">{{LABEL_REGIONAL_TRAIN}}<br></label> + <label class="icon-regional" for="regional" title="{{LABEL_REGIONAL_TRAIN}}">{{LABEL_REGIONAL_TRAIN}}<br></label> <input type="checkbox" id="suburban" name="suburban" checked> - <label for="suburban" title="{{LABEL_SUBURBAN_TRAIN}}">{{LABEL_SUBURBAN_TRAIN}}<br></label> + <label class="icon-suburban" for="suburban" title="{{LABEL_SUBURBAN_TRAIN}}">{{LABEL_SUBURBAN_TRAIN}}<br></label> <input type="checkbox" id="subway" name="subway" checked> - <label for="subway" title="{{LABEL_SUBWAY}}">{{LABEL_SUBWAY}}<br></label> + <label class="icon-subway" for="subway" title="{{LABEL_SUBWAY}}">{{LABEL_SUBWAY}}<br></label> <input type="checkbox" id="tram" name="tram" checked> - <label for="tram" title="{{LABEL_TRAM}}">{{LABEL_TRAM}}<br></label> + <label class="icon-tram" for="tram" title="{{LABEL_TRAM}}">{{LABEL_TRAM}}<br></label> <input type="checkbox" id="bus" name="bus" checked> - <label for="bus" title="{{LABEL_BUS}}">{{LABEL_BUS}}<br></label> + <label class="icon-bus" for="bus" title="{{LABEL_BUS}}">{{LABEL_BUS}}<br></label> <input type="checkbox" id="ferry" name="ferry" checked> - <label for="ferry" title="{{LABEL_FERRY}}">{{LABEL_FERRY}}<br></label> + <label class="icon-ferry" for="ferry" title="{{LABEL_FERRY}}">{{LABEL_FERRY}}<br></label> <input type="checkbox" id="taxi" name="taxi" checked> - <label for="taxi" title="{{LABEL_TAXI}}">{{LABEL_TAXI}}<br></label> + <label class="icon-taxi" for="taxi" title="{{LABEL_TAXI}}">{{LABEL_TAXI}}<br></label> </div> <span class="hidden">{{LABEL_ACCESSIBILITY}}:</span> <div class="selector"> <input type="radio" id="accessibilityNone" name="accessibility" value="none" checked> - <label for="accessibilityNone" title="{{LABEL_ACCESSIBILITY_NONE}}">{{LABEL_ACCESSIBILITY_NONE}}<br></label> + <label class="icon-walk-fast" for="accessibilityNone" title="{{LABEL_ACCESSIBILITY_NONE}}">{{LABEL_ACCESSIBILITY_NONE}}<br></label> <input type="radio" id="accessibilityPartial" name="accessibility" value="partial"> - <label for="accessibilityPartial" title="{{LABEL_ACCESSIBILITY_PARTIAL}}">{{LABEL_ACCESSIBILITY_PARTIAL}}<br></label> + <label class="icon-walk" for="accessibilityPartial" title="{{LABEL_ACCESSIBILITY_PARTIAL}}">{{LABEL_ACCESSIBILITY_PARTIAL}}<br></label> <input type="radio" id="accessibilityComplete" name="accessibility" value="complete"> - <label for="accessibilityComplete" title="{{LABEL_ACCESSIBILITY_FULL}}">{{LABEL_ACCESSIBILITY_FULL}}<br></label> + <label class="icon-wheelchair" for="accessibilityComplete" title="{{LABEL_ACCESSIBILITY_FULL}}">{{LABEL_ACCESSIBILITY_FULL}}<br></label> </div> <div class="selector"> @@ -93,37 +108,6 @@ </button> </div> - <input type="checkbox" id="btn-history" class="btn history hidden"> - <label for="btn-history"></label> - <div class="history"> - <div class="row history"> - <div class="history from"> - <small>Von:</small><br> - Berlin Hbf, Tief</div> - <div class="history arrow">Berlin</div> - <div class="history to"> - <small>Nach:</small><br> - Kiel, Teplizer Allee</div> - </div> - <div class="row history"> - <div class="history from"> - <small>Von:</small><br> - Köln Ostbahnhof</div> - <div class="history arrow">Berlin</div> - <div class="history to"> - <small>Nach:</small><br> - Karlsruhe, Hbf</div> - </div> - <div class="row history"> - <div class="history from"> - <small>Von:</small><br> - Berlin Flughafen (BER)</div> - <div class="history arrow">Berlin</div> - <div class="history to"> - <small>Nach:</small><br> - Münschen Hbf</div> - </div> - </div> <center>{{LABEL_LANGUAGE}}: <a href="/?lang=de">Deutsch</a> · <a href="/?lang=en">Englisch</a></center> </form>