Шаблон:recipe

Вернуться

Строка 1: Строка 1:
<includeonly>
<includeonly>
<div style="
<div style="
     display:grid;
     display:flex;
     grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     flex-direction:column;
    gap:12px;
     background:#171B22;
     background:#171B22;
     border:1px solid #FFFFFF;
     border:1px solid #FFFFFF;
Строка 10: Строка 9:
     color:#FFFFFF;
     color:#FFFFFF;
     font-family:Arial,sans-serif;
     font-family:Arial,sans-serif;
    padding:12px;
    justify-items:center;
    align-items:start;
">
">


     <!-- НАЗВАНИЕ (занимает всю ширину) -->
     <!-- НАЗВАНИЕ -->
     <div style="
     <div style="
        grid-column: 1 / -1;
         min-height:28px;
         min-height:28px;
         background:#202632;
         background:#202632;
Строка 25: Строка 20:
         padding:3px 10px;
         padding:3px 10px;
         box-sizing:border-box;
         box-sizing:border-box;
         border:1px solid #FFFFFF;
         border-bottom:1px solid #FFFFFF;
        width:100%;
     ">
     ">
         <div style="
         <div style="
Строка 37: Строка 31:
     </div>
     </div>


     <!-- ИНГРЕДИЕНТ 1 -->
     <!-- ОСНОВНАЯ ЧАСТЬ: три колонки -->
    {{#if:{{{ingredient1_name|}}}|
     <div style="
     <div style="
         display:flex;
         display:flex;
         flex-direction:column;
         align-items:flex-start;
         align-items:center;
        justify-content:space-between;
         width:100%;
        gap:12px;
         padding:12px;
         box-sizing:border-box;
     ">
     ">
        <!-- ИНГРЕДИЕНТЫ (сетка внутри) -->
         <div style="
         <div style="
             width:58px;
             display:grid;
            height:58px;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            display:flex;
            gap:8px;
            align-items:center;
            flex:1;
            justify-content:center;
            align-items:start;
            overflow:hidden;
        ">
        ">[[File:{{{ingredient1_img}}}|46px]]</div>
            <!-- ИНГРЕДИЕНТ 1 -->
        <div style="
            {{#if:{{{ingredient1_name|}}}|
            font-size:12px;
            <div style="
            color:#FFFFFF;
                display:flex;
            text-align:center;
                flex-direction:column;
            margin-top:5px;
                align-items:center;
            line-height:16px;
                width:70px;
        ">{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}|&nbsp;[{{{ingredient1_amount}}}]|}}</div>
            ">
    </div>
                <div style="
    |}}
                    width:58px;
                    height:58px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    overflow:hidden;
                ">[[File:{{{ingredient1_img}}}|46px]]</div>
                <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient1_name}}}{{#if:{{{ingredient1_amount|}}}|&nbsp;[{{{ingredient1_amount}}}]|}}</div>
            </div>
            |}}
 
            <!-- ИНГРЕДИЕНТ 2 -->
            {{#if:{{{ingredient2_name|}}}|
            <div style="
                display:flex;
                flex-direction:column;
                align-items:center;
                width:70px;
            ">
                <div style="
                    width:58px;
                    height:58px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    overflow:hidden;
                ">[[File:{{{ingredient2_img}}}|46px]]</div>
                <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient2_name}}}{{#if:{{{ingredient2_amount|}}}|&nbsp;[{{{ingredient2_amount}}}]|}}</div>
            </div>
            |}}


    <!-- ИНГРЕДИЕНТ 2 -->
            <!-- ИНГРЕДИЕНТ 3 -->
    {{#if:{{{ingredient2_name|}}}|
            {{#if:{{{ingredient3_name|}}}|
    <div style="
            <div style="
        display:flex;
                display:flex;
        flex-direction:column;
                flex-direction:column;
        align-items:center;
                align-items:center;
        width:100%;
                width:70px;
    ">
            ">
        <div style="
                <div style="
            width:58px;
                    width:58px;
            height:58px;
                    height:58px;
            display:flex;
                    display:flex;
            align-items:center;
                    align-items:center;
            justify-content:center;
                    justify-content:center;
            overflow:hidden;
                    overflow:hidden;
        ">[[File:{{{ingredient2_img}}}|46px]]</div>
                ">[[File:{{{ingredient3_img}}}|46px]]</div>
        <div style="
                <div style="
            font-size:12px;
                    font-size:12px;
            color:#FFFFFF;
                    color:#FFFFFF;
            text-align:center;
                    text-align:center;
            margin-top:5px;
                    margin-top:5px;
            line-height:16px;
                    line-height:16px;
        ">{{{ingredient2_name}}}{{#if:{{{ingredient2_amount|}}}|&nbsp;[{{{ingredient2_amount}}}]|}}</div>
                ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}</div>
    </div>
            </div>
    |}}
            |}}


    <!-- ИНГРЕДИЕНТ 3 -->
            <!-- ИНГРЕДИЕНТ 4 -->
    {{#if:{{{ingredient3_name|}}}|
            {{#if:{{{ingredient4_name|}}}|
    <div style="
            <div style="
        display:flex;
                display:flex;
        flex-direction:column;
                flex-direction:column;
        align-items:center;
                align-items:center;
        width:100%;
                width:70px;
    ">
            ">
        <div style="
                <div style="
            width:58px;
                    width:58px;
            height:58px;
                    height:58px;
            display:flex;
                    display:flex;
            align-items:center;
                    align-items:center;
            justify-content:center;
                    justify-content:center;
            overflow:hidden;
                    overflow:hidden;
        ">[[File:{{{ingredient3_img}}}|46px]]</div>
                ">[[File:{{{ingredient4_img}}}|46px]]</div>
        <div style="
                <div style="
            font-size:12px;
                    font-size:12px;
            color:#FFFFFF;
                    color:#FFFFFF;
            text-align:center;
                    text-align:center;
            margin-top:5px;
                    margin-top:5px;
            line-height:16px;
                    line-height:16px;
        ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}</div>
                ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}</div>
    </div>
            </div>
    |}}
            |}}


    <!-- ИНГРЕДИЕНТ 4 -->
            <!-- ИНГРЕДИЕНТ 5 -->
    {{#if:{{{ingredient4_name|}}}|
            {{#if:{{{ingredient5_name|}}}|
    <div style="
            <div style="
        display:flex;
                display:flex;
        flex-direction:column;
                flex-direction:column;
        align-items:center;
                align-items:center;
        width:100%;
                width:70px;
    ">
            ">
        <div style="
                <div style="
            width:58px;
                    width:58px;
            height:58px;
                    height:58px;
            display:flex;
                    display:flex;
            align-items:center;
                    align-items:center;
            justify-content:center;
                    justify-content:center;
            overflow:hidden;
                    overflow:hidden;
        ">[[File:{{{ingredient4_img}}}|46px]]</div>
                ">[[File:{{{ingredient5_img}}}|46px]]</div>
        <div style="
                <div style="
            font-size:12px;
                    font-size:12px;
            color:#FFFFFF;
                    color:#FFFFFF;
            text-align:center;
                    text-align:center;
            margin-top:5px;
                    margin-top:5px;
            line-height:16px;
                    line-height:16px;
        ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}</div>
                ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}</div>
    </div>
            </div>
    |}}
            |}}
        </div>


    <!-- ИНГРЕДИЕНТ 5 -->
        <!-- СПОСОБ ПРИГОТОВЛЕНИЯ (фиксированная колонка) -->
    {{#if:{{{ingredient5_name|}}}|
    <div style="
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
    ">
         <div style="
         <div style="
            width:58px;
            height:58px;
             display:flex;
             display:flex;
            flex-direction:column;
             align-items:center;
             align-items:center;
             justify-content:center;
             justify-content:center;
             overflow:hidden;
             flex-shrink:0;
        ">[[File:{{{ingredient5_img}}}|46px]]</div>
            min-width:80px;
        <div style="
            border-left:1px solid #FFFFFF;
            font-size:12px;
            padding-left:15px;
            color:#FFFFFF;
        ">
            text-align:center;
            <div style="
            margin-top:5px;
                width:60px;
             line-height:16px;
                height:60px;
        ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}</div>
                display:flex;
    </div>
                align-items:center;
    |}}
                justify-content:center;
                overflow:hidden;
            ">{{#switch:{{{method_name|}}}
                |Микроволновка=[[File:Microwave.gif|60px]]
                |Смешивание=[[File:Beaker.png|60px]]
                |Нож=[[File:Knife.png|60px]]
                |Скалка=[[File:RollingPin.png|60px]]
                |#default=[[File:Microwave.gif|60px]]
            }}</div>
            <div style="
                font-size:13px;
                font-weight:bold;
                line-height:17px;
                text-align:center;
                color:#FFFFFF;
                margin-top:4px;
             ">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}</div>
        </div>


    <!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
        <!-- РЕЗУЛЬТАТ (фиксированная колонка) -->
    <div style="
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
    ">
         <div style="
         <div style="
            width:60px;
            height:60px;
             display:flex;
             display:flex;
            flex-direction:column;
             align-items:center;
             align-items:center;
             justify-content:center;
             justify-content:center;
             overflow:hidden;
             flex-shrink:0;
         ">{{#switch:{{{method_name|}}}
            border-left:1px solid #FFFFFF;
             |Микроволновка=[[File:Microwave.gif|60px]]
            padding-left:15px;
            |Смешивание=[[File:Beaker.png|60px]]
         ">
            |Нож=[[File:Knife.png|60px]]
             <div style="
            |Скалка=[[File:RollingPin.png|60px]]
                width:58px;
             |#default=[[File:Microwave.gif|60px]]
                height:58px;
        }}</div>
                display:flex;
        <div style="
                align-items:center;
            font-size:13px;
                justify-content:center;
            font-weight:bold;
                overflow:hidden;
            line-height:17px;
             ">[[File:{{{result_img}}}|46px]]</div>
            text-align:center;
            <div style="
            color:#FFFFFF;
                font-size:12px;
            margin-top:4px;
                color:#FFFFFF;
        ">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}</div>
                text-align:center;
    </div>
                margin-top:5px;
                line-height:16px;
            ">{{{result_name|Результат}}}</div>
        </div>


    <!-- РЕЗУЛЬТАТ -->
    <div style="
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
    ">
        <div style="
            width:58px;
            height:58px;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        ">[[File:{{{result_img}}}|46px]]</div>
        <div style="
            font-size:12px;
            color:#FFFFFF;
            text-align:center;
            margin-top:5px;
            line-height:16px;
        ">{{{result_name|Результат}}}</div>
     </div>
     </div>
</div>
</div>
</includeonly>
</includeonly>