code.gitea.io/gitea@v1.22.3/templates/devtest/flex-list.tmpl (about)

     1  {{template "base/head" .}}
     2  <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
     3  <div class="page-content devtest">
     4  	<div class="ui container">
     5  		<h1>Flex List (standalone)</h1>
     6  		<div class="divider"></div>
     7  		<div class="flex-list">
     8  			<div class="flex-item">
     9  				<div class="flex-item-leading">
    10  					{{svg "octicon-info" 32}}
    11  				</div>
    12  				<div class="flex-item-main">
    13  					<div class="flex-item-title">
    14  						Flex Item
    15  						<span class="ui basic label">
    16  							with label
    17  						</span>
    18  					</div>
    19  					<div class="flex-item-body">
    20  						consists of leading/main/trailing part
    21  					</div>
    22  					<div class="flex-item-body">
    23  						main part contains title and (multiple) body lines
    24  					</div>
    25  				</div>
    26  				<div class="flex-item-trailing">
    27  					<button class="ui tiny red button">
    28  						{{svg "octicon-alert" 14}} CJK文本测试
    29  					</button>
    30  					<button class="ui tiny primary button">
    31  						{{svg "octicon-info" 14}} Button
    32  					</button>
    33  					<button class="ui tiny primary button">
    34  						Button with long text
    35  					</button>
    36  				</div>
    37  			</div>
    38  
    39  			<div class="flex-item">
    40  				<div class="flex-item-leading">
    41  					{{svg "octicon-info" 32}}
    42  				</div>
    43  				<div class="flex-item-main">
    44  					<div class="flex-item-title">
    45  						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
    46  					</div>
    47  					<div class="flex-item-body">
    48  						consists of leading/main/trailing part
    49  					</div>
    50  					<div class="flex-item-body">
    51  						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
    52  						<span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
    53  					</div>
    54  				</div>
    55  				<div class="flex-item-trailing">
    56  					<button class="ui tiny red button">
    57  						{{svg "octicon-alert" 12}} CJK文本测试 <!-- single CJK text test, it shouldn't be horizontal -->
    58  					</button>
    59  				</div>
    60  			</div>
    61  
    62  			<div class="flex-item">
    63  				<div class="flex-item-leading">
    64  					{{svg "octicon-repo" 32}}
    65  				</div>
    66  				<div class="flex-item-main">
    67  					<div class="flex-item-header">
    68  						<div class="flex-item-title">
    69  							<a class="text primary" href="{{$.Link}}">
    70  								gitea-org / gitea
    71  							</a>
    72  							<span data-tooltip-content="{{ctx.Locale.Tr "repo.fork"}}">{{svg "octicon-repo-forked"}}</span>
    73  						</div>
    74  						<div class="flex-item-trailing">
    75  							<a class="muted" href="{{$.Link}}">
    76  								<span class="flex-text-inline"><i class="color-icon tw-mr-2 tw-bg-blue"></i>Go</span>
    77  							</a>
    78  							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-star" 16}}45000</a>
    79  							<a class="text grey flex-text-inline" href="{{$.Link}}">{{svg "octicon-git-branch" 16}}1234</a>
    80  						</div>
    81  					</div>
    82  					<div class="flex-item-body">
    83  						when inside header, the trailing part will wrap below the title
    84  					</div>
    85  				</div>
    86  			</div>
    87  		</div>
    88  
    89  		<div class="divider"></div>
    90  
    91  		<h1>Flex List (with "ui segment")</h1>
    92  		<div class="ui attached segment">
    93  			<div class="flex-list">
    94  				<div class="flex-item">item 1</div>
    95  				<div class="flex-item">item 2</div>
    96  			</div>
    97  		</div>
    98  		<div class="ui attached segment">
    99  			<h1>Flex List (with "ui segment")</h1>
   100  			<div class="flex-list">
   101  				<div class="flex-item">item 1</div>
   102  				<div class="flex-item">item 2</div>
   103  			</div>
   104  		</div>
   105  
   106  		<h1>If parent provides the padding/margin space:</h1>
   107  		<div class="tw-border tw-border-secondary tw-py-4">
   108  			<div class="flex-list flex-space-fitted">
   109  				<div class="flex-item">item 1 (no padding top)</div>
   110  				<div class="flex-item">item 2 (no padding bottom)</div>
   111  			</div>
   112  		</div>
   113  	</div>
   114  </div>
   115  {{template "base/footer" .}}