Atay-Makhzan/templates/devtest/flex-list.tmpl

{{template "devtest/devtest-header"}}
<div class="page-content devtest">
	<div class="ui container">
		<h1>Flex List (standalone)</h1>
		<div class="divider"></div>
		<div class="flex-list">
			<div class="flex-item">
				<div class="flex-item-leading">
					{{svg "octicon-info" 32}}
				</div>
				<div class="flex-item-main">
					<div class="flex-item-title">
						Flex Item
						<span class="ui basic label">
							with label
						</span>
					</div>
					<div class="flex-item-body">
						consists of leading/main/trailing part
					</div>
					<div class="flex-item-body">
						main part contains title and (multiple) body lines
					</div>
				</div>
				<div class="flex-item-trailing">
					<button class="ui tiny red button">
						{{svg "octicon-alert" 14}} CJK文本测试
					</button>
					<button class="ui tiny primary button">
						{{svg "octicon-info" 14}} Button
					</button>
					<button class="ui tiny primary button">
						Button with long text
					</button>
				</div>
			</div>

			<div class="flex-item">
				<div class="flex-item-leading">
					{{svg "octicon-info" 32}}
				</div>
				<div class="flex-item-main">
					<div class="flex-item-title">
						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
					</div>
					<div class="flex-item-body">
						consists of leading/main/trailing part
					</div>
					<div class="flex-item-body">
						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
						<span class="tw-inline-block tw-truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
					</div>
				</div>
				<div class="flex-item-trailing">
					<button class="ui tiny red button">
						{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
					</button>
				</div>
			</div>

			<div class="flex-item">
				<div class="flex-item-leading">
					{{svg "octicon-repo" 32}}
				</div>
				<div class="flex-item-main">
					<div class="flex-item-header">
						<div class="flex-item-title">
							<a class="tw-text-primary" href="{{$.Link}}">
								gitea-org / gitea
							</a>
							<span class="flex-text-inline" data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
						</div>
						<div class="flex-item-trailing">
							<a class="muted" href="{{$.Link}}">
								<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
							</a>
							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
							<a class="tw-text-text-light flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
						</div>
					</div>
					<div class="flex-item-body">
						when inside header, the trailing part will wrap below the title
					</div>
				</div>
			</div>
		</div>

		<div class="divider"></div>

		<h1>Flex List (with "ui segment")</h1>
		<div class="ui attached segment">
			<div class="flex-list">
				<div class="flex-item">item 1</div>
				<div class="flex-item">item 2</div>
			</div>
		</div>
		<div class="ui attached segment">
			<h1>Flex List (with "ui segment")</h1>
			<div class="flex-list">
				<div class="flex-item">item 1</div>
				<div class="flex-item">item 2</div>
			</div>
		</div>

		<h1>If parent provides the padding/margin space:</h1>
		<div class="tw-border tw-border-secondary tw-py-4">
			<div class="flex-list flex-space-fitted">
				<div class="flex-item">item 1 (no padding top)</div>
				<div class="flex-item">item 2 (no padding bottom)</div>
			</div>
		</div>
	</div>
</div>
{{template "devtest/devtest-footer"}}