<%@ Page Title="Compact Layout" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Compact Layout - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Compact Layout</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Compact Layout</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A minimal, space-saving uploader layout suitable for inline forms,
            sidebars, or any area with limited vertical space.
        </p>

        <style>
            .compact-uploader {
                --cu-font-size: 0.8rem;
                --cu-padding: 0.35rem 0.75rem;
                --cu-border-radius: 0.25rem;
                max-width: 320px;
            }
            .compact-uploader .ajaxuploader-button {
                font-size: 0.8rem;
                padding: 0.35rem 0.75rem;
            }
            .compact-uploader .ajaxuploader-queue {
                font-size: 0.75rem;
                max-height: 120px;
                overflow-y: auto;
            }
        </style>

        <div class="compact-uploader">
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AllowMultiple="true"
                ButtonText="Attach"
                MaxFileSize="2MB"
                ShowProgress="true" />
        </div>

        <div class="code-panel">
            <pre><code>&lt;style&gt;
  .compact-uploader {
    --cu-font-size: 0.8rem;
    --cu-padding: 0.35rem 0.75rem;
    --cu-border-radius: 0.25rem;
    max-width: 320px;
  }
  .compact-uploader .ajaxuploader-button {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
  }
  .compact-uploader .ajaxuploader-queue {
    font-size: 0.75rem;
    max-height: 120px;
    overflow-y: auto;
  }
&lt;/style&gt;

&lt;div class="compact-uploader"&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
      AllowMultiple="true"
      ButtonText="Attach"
      MaxFileSize="2MB"
      ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>
