code.gitea.io/gitea@v1.22.3/templates/devtest/gitea-ui.tmpl (about) 1 {{template "base/head" .}} 2 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> 3 <div class="page-content devtest ui container"> 4 <div> 5 <h1>Link</h1> 6 <div> 7 <a href="#">normal</a> 8 <a class="muted" href="#">muted</a> 9 <a class="suppressed" href="#">suppressed</a> 10 <a class="silenced" href="#">silenced</a> 11 </div> 12 <h1>Button</h1> 13 <div> 14 Style: 15 <label><input type="checkbox" name="button-style-compact" value="compact">compact</label> 16 <label><input type="radio" name="button-style-size" value="">(normal)</label> 17 <label><input type="radio" name="button-style-size" value="tiny">tiny</label> 18 <label><input type="radio" name="button-style-size" value="mini">mini</label> 19 </div> 20 <div> 21 State: 22 <label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> 23 </div> 24 <div id="devtest-button-samples"> 25 <ul class="button-sample-groups"> 26 <li class="sample-group"> 27 <h2>General purpose:</h2> 28 <button class="ui button">Unclassed</button> 29 <button class="ui basic button">Basic Unclassed</button> 30 <button class="ui primary button">Primary</button> 31 <button class="ui basic primary button">Basic Primary</button> 32 </li> 33 <li class="sample-group"> 34 <h2>Recommended colors:</h2> 35 <button class="ui red button">Red</button> 36 <button class="ui basic red button">Basic Red</button> 37 <button class="ui green button">Green</button> 38 <button class="ui basic green button">Basic Green</button> 39 </li> 40 <li class="sample-group"> 41 <h2>Inline / Plain:</h2> 42 <div class="tw-my-1"> 43 <button class="btn tw-p-2">Plain button</button> 44 <button class="btn interact-fg tw-p-2">Plain button with interact fg</button> 45 <button class="btn interact-bg tw-p-2">Plain button with interact bg</button> 46 </div> 47 </li> 48 </ul> 49 <script type="module"> 50 const $buttons = $('#devtest-button-samples').find('button.ui'); 51 52 const $buttonStyles = $('input[name*="button-style"]'); 53 $buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked))); 54 55 const $buttonStates = $('input[name*="button-state"]'); 56 $buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked))); 57 </script> 58 </div> 59 </div> 60 61 <div> 62 <h1>Buttons</h1> 63 <div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button">3</button></div> 64 <div class="ui buttons"><button class="ui button active">1</button><button class="ui button">2</button><button class="ui button">3</button></div> 65 <div class="ui buttons"><button class="ui button">1</button><button class="ui button active">2</button><button class="ui button">3</button></div> 66 <div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button active">3</button></div> 67 </div> 68 69 <div> 70 <h1>Tooltip</h1> 71 <div><span data-tooltip-content="test tooltip">text with tooltip</span></div> 72 <div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div> 73 </div> 74 75 <div> 76 <h1>Loading</h1> 77 <div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div> 78 <div class="is-loading tw-border tw-border-secondary tw-py-4"> 79 <p>loading ...</p> 80 <p>loading ...</p> 81 <p>loading ...</p> 82 <p>loading ...</p> 83 </div> 84 </div> 85 86 <div> 87 <h1><origin-url></h1> 88 <div><origin-url data-url="test/url"></origin-url></div> 89 <div><origin-url data-url="/test/url"></origin-url></div> 90 </div> 91 92 <div> 93 <h1><overflow-menu></h1> 94 <overflow-menu class="ui secondary pointing tabular borderless menu"> 95 <div class="overflow-menu-items"> 96 <a class="active item">item</a> 97 <a class="item">item 1</a> 98 <a class="item">item 2</a> 99 <a class="item">item 3</a> 100 <a class="item">item 4</a> 101 <a class="item">item 5</a> 102 <a class="item">item 6</a> 103 <a class="item">item 7</a> 104 <a class="item">item 8</a> 105 <a class="item">item 9</a> 106 <a class="item">item 10</a> 107 <a class="item">item 11</a> 108 <a class="item">item 12</a> 109 <a class="item">item 13</a> 110 <a class="item">item 14</a> 111 <a class="item">item 15</a> 112 <a class="item">item 16</a> 113 <a class="item">item 17</a> 114 <a class="item">item 18</a> 115 </div> 116 </overflow-menu> 117 </div> 118 119 <div> 120 <h1>GiteaAbsoluteDate</h1> 121 <div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div> 122 <div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div> 123 <div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div> 124 <div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div> 125 <div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div> 126 <div class="tw-text-text-light-2">relative-time: <relative-time format="datetime" datetime="2024-03-11" year="" day="numeric" month="numeric"></relative-time></div> 127 </div> 128 129 <div> 130 <h1>LocaleNumber</h1> 131 <div>{{ctx.Locale.PrettyNumber 1}}</div> 132 <div>{{ctx.Locale.PrettyNumber 12}}</div> 133 <div>{{ctx.Locale.PrettyNumber 123}}</div> 134 <div>{{ctx.Locale.PrettyNumber 1234}}</div> 135 <div>{{ctx.Locale.PrettyNumber 12345}}</div> 136 <div>{{ctx.Locale.PrettyNumber 123456}}</div> 137 <div>{{ctx.Locale.PrettyNumber 1234567}}</div> 138 </div> 139 140 <div> 141 <h1>TimeSince</h1> 142 <div>Now: {{TimeSince .TimeNow ctx.Locale}}</div> 143 <div>5s past: {{TimeSince .TimePast5s ctx.Locale}}</div> 144 <div>5s future: {{TimeSince .TimeFuture5s ctx.Locale}}</div> 145 <div>2m past: {{TimeSince .TimePast2m ctx.Locale}}</div> 146 <div>2m future: {{TimeSince .TimeFuture2m ctx.Locale}}</div> 147 <div>1y past: {{TimeSince .TimePast1y ctx.Locale}}</div> 148 <div>1y future: {{TimeSince .TimeFuture1y ctx.Locale}}</div> 149 </div> 150 151 <div> 152 <h1>SVG alignment</h1> 153 154 <h2>Text with SVG</h2> 155 <div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div> 156 <div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div> 157 158 <div class="flex-text-block">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div> 159 160 <div class="flex-items-block"> 161 <div class="item">{{svg "octicon-alert"}} flex every line</div> 162 <div class="item">{{svg "octicon-alert"}} flex every item</div> 163 <div class="item">{{svg "octicon-alert"}} flex item with very very very very very very very very long content</div> 164 </div> 165 166 <h2>Button with SVG</h2> 167 <div> 168 <button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button> 169 <div class="ui labeled button"> 170 <button class="ui basic button">labeled button</button> 171 <a class="ui basic label">123</a> 172 </div> 173 <button class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button> 174 </div> 175 176 <h2>Input with SVG</h2> 177 <div> 178 <div class="ui icon search input"> 179 <i class="icon">{{svg "octicon-search"}}</i> 180 <input type="text" placeholder="place holder"> 181 </div> 182 </div> 183 </div> 184 185 <div> 186 <h1>Toast</h1> 187 <div> 188 <button class="ui button" id="info-toast">Show Info Toast</button> 189 <button class="ui button" id="warning-toast">Show Warning Toast</button> 190 <button class="ui button" id="error-toast">Show Error Toast</button> 191 </div> 192 </div> 193 194 <div> 195 <h1>ComboMarkdownEditor</h1> 196 <div>ps: no JS code attached, so just a layout</div> 197 {{template "shared/combomarkdowneditor" .}} 198 </div> 199 200 <h1>Tailwind CSS Demo</h1> 201 <div> 202 <button class="{{if true}}tw-bg-red{{end}} tw-p-5 tw-border tw-rounded hover:tw-bg-blue active:tw-bg-yellow">Button</button> 203 </div> 204 205 <script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script> 206 </div> 207 {{template "base/footer" .}}