2024-11-26 18:36:55 +03:00
{{ template "devtest/devtest-header" }}
2023-04-15 14:01:54 +03:00
<div class="page-content devtest ui container">
2023-05-13 23:38:22 +03:00
<div>
2024-03-24 15:14:03 +03:00
<h1>Link</h1>
<div>
<a href="#">normal</a>
<a class="muted" href="#">muted</a>
<a class="suppressed" href="#">suppressed</a>
<a class="silenced" href="#">silenced</a>
</div>
2023-05-13 23:38:22 +03:00
<h1>Button</h1>
<div>
Style:
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
<label><input type="radio" name="button-style-size" value="">(normal)</label>
<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
<label><input type="radio" name="button-style-size" value="mini">mini</label>
</div>
<div>
State:
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
</div>
<div id="devtest-button-samples">
2023-06-09 11:37:47 +03:00
<ul class="button-sample-groups">
<li class="sample-group">
<h2>General purpose:</h2>
<button class="ui button">Unclassed</button>
<button class="ui basic button">Basic Unclassed</button>
<button class="ui primary button">Primary</button>
<button class="ui basic primary button">Basic Primary</button>
</li>
<li class="sample-group">
<h2>Recommended colors:</h2>
<button class="ui red button">Red</button>
<button class="ui basic red button">Basic Red</button>
2024-04-14 20:53:52 +03:00
<button class="ui green button">Green</button>
<button class="ui basic green button">Basic Green</button>
2023-06-09 11:37:47 +03:00
</li>
<li class="sample-group">
<h2>Inline / Plain:</h2>
Migrate margin and padding helpers to tailwind (#30043)
This will conclude the refactor of 1:1 class replacements to tailwind,
except `gt-hidden`. Commands ran:
```bash
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g' {web_src/js,templates,routers,services}/**/*
```
2024-03-24 19:42:49 +03:00
<div class="tw-my-1">
<button class="btn tw-p-2">Plain button</button>
<button class="btn interact-fg tw-p-2">Plain button with interact fg</button>
<button class="btn interact-bg tw-p-2">Plain button with interact bg</button>
2023-06-09 11:37:47 +03:00
</div>
</li>
</ul>
<script type="module">
const $buttons = $('#devtest-button-samples').find('button.ui');
2023-05-13 23:38:22 +03:00
2023-06-09 11:37:47 +03:00
const $buttonStyles = $('input[name*="button-style"]');
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
2023-05-13 23:38:22 +03:00
2023-06-09 11:37:47 +03:00
const $buttonStates = $('input[name*="button-state"]');
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
</script>
</div>
2023-05-13 23:38:22 +03:00
</div>
2023-04-15 14:01:54 +03:00
2023-04-03 13:06:57 +03:00
<div>
2023-09-04 13:22:46 +03:00
<h1>Buttons</h1>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button active">1</button><button class="ui button">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button active">2</button><button class="ui button">3</button></div>
<div class="ui buttons"><button class="ui button">1</button><button class="ui button">2</button><button class="ui button active">3</button></div>
</div>
<div>
2023-04-15 14:01:54 +03:00
<h1>Tooltip</h1>
<div><span data-tooltip-content="test tooltip">text with tooltip</span></div>
<div><span data-tooltip-content="test tooltip" data-tooltip-interactive="true">text with interactive tooltip</span></div>
2023-04-03 13:06:57 +03:00
</div>
2023-04-15 14:01:54 +03:00
2023-06-14 11:01:37 +03:00
<div>
<h1>Loading</h1>
2024-03-31 19:06:06 +03:00
<div class="is-loading loading-icon-2px tw-border tw-border-secondary tw-py-1"><span>loading ...</span></div>
Migrate margin and padding helpers to tailwind (#30043)
This will conclude the refactor of 1:1 class replacements to tailwind,
except `gt-hidden`. Commands ran:
```bash
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g' {web_src/js,templates,routers,services}/**/*
```
2024-03-24 19:42:49 +03:00
<div class="is-loading tw-border tw-border-secondary tw-py-4">
2023-06-14 11:01:37 +03:00
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>
</div>
</div>
2023-04-03 13:06:57 +03:00
<div>
2024-03-15 05:05:31 +03:00
<h1><origin-url></h1>
<div><origin-url data-url="test/url"></origin-url></div>
<div><origin-url data-url="/test/url"></origin-url></div>
</div>
<div>
<h1><overflow-menu></h1>
<overflow-menu class="ui secondary pointing tabular borderless menu">
<div class="overflow-menu-items">
<a class="active item">item</a>
<a class="item">item 1</a>
<a class="item">item 2</a>
<a class="item">item 3</a>
<a class="item">item 4</a>
<a class="item">item 5</a>
<a class="item">item 6</a>
<a class="item">item 7</a>
<a class="item">item 8</a>
<a class="item">item 9</a>
<a class="item">item 10</a>
<a class="item">item 11</a>
<a class="item">item 12</a>
<a class="item">item 13</a>
<a class="item">item 14</a>
<a class="item">item 15</a>
<a class="item">item 16</a>
<a class="item">item 17</a>
<a class="item">item 18</a>
</div>
</overflow-menu>
2023-04-03 13:06:57 +03:00
</div>
2023-04-15 14:01:54 +03:00
2024-03-13 01:37:02 +03:00
<div>
<h1>GiteaAbsoluteDate</h1>
2024-03-15 05:05:31 +03:00
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div>
<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
<div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
2024-03-13 01:37:02 +03:00
<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>
</div>
2023-04-15 14:01:54 +03:00
<div>
<h1>LocaleNumber</h1>
2023-09-25 15:42:40 +03:00
<div> {{ ctx .Locale .PrettyNumber 1 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 3 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 3 4 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 3 4 5 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 3 4 5 6 }} </div>
<div> {{ ctx .Locale .PrettyNumber 1 2 3 4 5 6 7 }} </div>
2023-04-15 14:01:54 +03:00
</div>
<div>
<h1>TimeSince</h1>
2024-11-04 14:30:00 +03:00
<div>Now: {{ DateUtils .TimeSince .TimeNow }} </div>
<div>5s past: {{ DateUtils .TimeSince .TimePast5s }} </div>
<div>5s future: {{ DateUtils .TimeSince .TimeFuture5s }} </div>
<div>2m past: {{ DateUtils .TimeSince .TimePast2m }} </div>
<div>2m future: {{ DateUtils .TimeSince .TimeFuture2m }} </div>
<div>1y past: {{ DateUtils .TimeSince .TimePast1y }} </div>
<div>1y future: {{ DateUtils .TimeSince .TimeFuture1y }} </div>
2023-04-15 14:01:54 +03:00
</div>
2023-06-14 19:40:15 +03:00
<div>
<h1>SVG alignment</h1>
<h2>Text with SVG</h2>
<div class="flex-text-block"> {{ svg "octicon-alert" }} {{ svg "octicon-x" }} text (block)</div>
<div><div class="flex-text-inline"> {{ svg "octicon-alert" }} {{ svg "octicon-x" }} text</div> (inline)</div>
2023-08-22 07:57:02 +03:00
<div class="flex-text-block"> {{ svg "octicon-alert" }} flex item with very very very very very very very very long content</div>
2023-06-14 19:40:15 +03:00
<div class="flex-items-block">
<div class="item"> {{ svg "octicon-alert" }} flex every line</div>
<div class="item"> {{ svg "octicon-alert" }} flex every item</div>
2023-08-22 07:57:02 +03:00
<div class="item"> {{ svg "octicon-alert" }} flex item with very very very very very very very very long content</div>
2023-06-14 19:40:15 +03:00
</div>
<h2>Button with SVG</h2>
<div>
<button class="ui red button"> {{ svg "octicon-alert" 2 4 }} {{ svg "octicon-x" 2 4 }} text</button>
<div class="ui labeled button">
<button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a>
</div>
2024-04-14 20:53:52 +03:00
<button class="ui button"> {{ svg "octicon-x" 1 6 }} button with very very very very very very very very long text</button>
2023-06-14 19:40:15 +03:00
</div>
<h2>Input with SVG</h2>
<div>
<div class="ui icon search input">
<i class="icon"> {{ svg "octicon-search" }} </i>
<input type="text" placeholder="place holder">
</div>
</div>
</div>
2023-04-15 14:01:54 +03:00
<div>
<h1>ComboMarkdownEditor</h1>
2024-12-04 05:11:34 +03:00
{{ template "shared/combomarkdowneditor" dict "MarkdownPreviewContext" "/owner/path" }}
2023-04-15 14:01:54 +03:00
</div>
Add tailwindcss (#29357)
This will get tailwindcss working on a basic level. It provides only the
utility classes, e.g. no tailwind base which we don't need because we
have our own CSS reset. Without the base, we also do not have their CSS
variables so a small amount of features do not work and I removed the
generated classes for them.
***Note for future developers: This currently uses a `tw-` prefix, so we
use it like `tw-p-3`.***
<details>
<summary>Currently added CSS, all false-positives</summary>
```
.\!visible{
visibility: visible !important
}
.visible{
visibility: visible
}
.invisible{
visibility: hidden
}
.collapse{
visibility: collapse
}
.static{
position: static
}
.\!fixed{
position: fixed !important
}
.absolute{
position: absolute
}
.relative{
position: relative
}
.sticky{
position: sticky
}
.left-10{
left: 2.5rem
}
.isolate{
isolation: isolate
}
.float-right{
float: right
}
.float-left{
float: left
}
.mr-2{
margin-right: 0.5rem
}
.mr-3{
margin-right: 0.75rem
}
.\!block{
display: block !important
}
.block{
display: block
}
.inline-block{
display: inline-block
}
.inline{
display: inline
}
.flex{
display: flex
}
.inline-flex{
display: inline-flex
}
.\!table{
display: table !important
}
.inline-table{
display: inline-table
}
.table-caption{
display: table-caption
}
.table-cell{
display: table-cell
}
.table-column{
display: table-column
}
.table-column-group{
display: table-column-group
}
.table-footer-group{
display: table-footer-group
}
.table-header-group{
display: table-header-group
}
.table-row-group{
display: table-row-group
}
.table-row{
display: table-row
}
.flow-root{
display: flow-root
}
.inline-grid{
display: inline-grid
}
.contents{
display: contents
}
.list-item{
display: list-item
}
.\!hidden{
display: none !important
}
.hidden{
display: none
}
.flex-shrink{
flex-shrink: 1
}
.shrink{
flex-shrink: 1
}
.flex-grow{
flex-grow: 1
}
.grow{
flex-grow: 1
}
.border-collapse{
border-collapse: collapse
}
.select-all{
user-select: all
}
.resize{
resize: both
}
.flex-wrap{
flex-wrap: wrap
}
.overflow-visible{
overflow: visible
}
.rounded{
border-radius: 0.25rem
}
.border{
border-width: 1px
}
.text-justify{
text-align: justify
}
.uppercase{
text-transform: uppercase
}
.lowercase{
text-transform: lowercase
}
.capitalize{
text-transform: capitalize
}
.italic{
font-style: italic
}
.text-red{
color: var(--color-red)
}
.text-shadow{
color: var(--color-shadow)
}
.underline{
text-decoration-line: underline
}
.overline{
text-decoration-line: overline
}
.line-through{
text-decoration-line: line-through
}
.outline{
outline-style: solid
}
.ease-in{
transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}
.ease-out{
transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
```
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
2024-02-25 19:46:46 +03:00
<h1>Tailwind CSS Demo</h1>
<div>
<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>
</div>
2023-04-03 13:06:57 +03:00
</div>
2024-11-26 18:36:55 +03:00
{{ template "devtest/devtest-footer" }}