Шаблон:Recipe: различия между версиями

Материал из МК14 | Space Station 14 Wiki
Нет описания правки
Нет описания правки
 
(не показана 1 промежуточная версия этого же участника)
Строка 1: Строка 1:
<includeonly>
<includeonly>
<div style="
<div style="
     display:flex;
     display:inline-flex;
    vertical-align:top;
     flex-direction:column;
     flex-direction:column;
     background:#171B22;
     background:#171B22;
Строка 9: Строка 10:
     color:#FFFFFF;
     color:#FFFFFF;
     font-family:Arial,sans-serif;
     font-family:Arial,sans-serif;
    margin:4px;
    width:auto;
    max-width:350px;
">
<!-- НАЗВАНИЕ -->
<div style="
    min-height:28px;
    background:#202632;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #FFFFFF;
">
    <div style="
        font-size:14px;
        font-weight:bold;
        color:#FFFFFF;
        text-align:center;
        line-height:18px;
    ">{{{title|Рецепт}}}
    </div>
</div>
<!-- ОСНОВНАЯ ЧАСТЬ -->
<div style="
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding:12px;
    box-sizing:border-box;
    flex-wrap:nowrap;
">
<!-- ИНГРЕДИЕНТЫ -->
<div style="
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
    max-width:200px;
">
<!-- ИНГРЕДИЕНТ 1 -->
{{#if:{{{ingredient1_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:{{{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>
|}}
<!-- ИНГРЕДИЕНТ 3 -->
{{#if:{{{ingredient3_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:{{{ingredient3_img}}}|46px]]
    </div>
    <div style="
        font-size:12px;
        color:#FFFFFF;
        text-align:center;
        margin-top:5px;
        line-height:16px;
    ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}
    </div>
</div>
|}}


    <!-- НАЗВАНИЕ -->
<!-- ИНГРЕДИЕНТ 4 -->
{{#if:{{{ingredient4_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
     <div style="
     <div style="
         min-height:28px;
         width:58px;
         background:#202632;
         height:58px;
         display:flex;
         display:flex;
         align-items:center;
         align-items:center;
         justify-content:center;
         justify-content:center;
         padding:3px 10px;
         overflow:hidden;
        box-sizing:border-box;
    ">[[File:{{{ingredient4_img}}}|46px]]
        border-bottom:1px solid #FFFFFF;
     </div>
     ">
    <div style="
        <div style="
        font-size:12px;
            font-size:14px;
        color:#FFFFFF;
            font-weight:bold;
        text-align:center;
            color:#FFFFFF;
        margin-top:5px;
            text-align:center;
        line-height:16px;
            line-height:18px;
    ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}
        ">{{{title|Рецепт}}}</div>
     </div>
     </div>
</div>
|}}


    <!-- ДВЕ КОЛОНКИ -->
<!-- ИНГРЕДИЕНТ 5 -->
{{#if:{{{ingredient5_name|}}}|
<div style="
    display:flex;
    flex-direction:column;
    align-items:center;
    width:70px;
">
     <div style="
     <div style="
        width:58px;
        height:58px;
         display:flex;
         display:flex;
         align-items:flex-start;
         align-items:center;
         gap:12px;
        justify-content:center;
         padding:12px;
        overflow:hidden;
         box-sizing:border-box;
    ">[[File:{{{ingredient5_img}}}|46px]]
     ">
    </div>
    <div style="
         font-size:12px;
         color:#FFFFFF;
         text-align:center;
        margin-top:5px;
        line-height:16px;
     ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}
    </div>
</div>
|}}


        <!-- ЛЕВАЯ КОЛОНКА: ИНГРЕДИЕНТЫ (сетка 2 колонки) -->
</div>
        <div style="
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr)); /* ровно 2 колонки */
            gap:8px;
            flex:1;
            align-items:start;
        ">
            <!-- ИНГРЕДИЕНТ 1 -->
            {{#if:{{{ingredient1_name|}}}|
            <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:{{{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="
            <div style="
    display:flex;
                display:flex;
    flex-direction:column;
                flex-direction:column;
    align-items:center;
                align-items:center;
    justify-content:center;
                width:100%;
    flex-shrink:0;
            ">
    min-width:70px;
                <div style="
    border-left:1px solid #FFFFFF;
                    width:58px;
    padding-left:10px;
                    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>
            |}}


            <!-- ИНГРЕДИЕНТ 3 -->
<!-- АВТОМАТИЧЕСКАЯ КАРТИНКА МЕТОДА (с fallback) -->
            {{#if:{{{ingredient3_name|}}}|
<div style="
            <div style="
    width:60px;
                display:flex;
    height:60px;
                flex-direction:column;
    display:flex;
                align-items:center;
    align-items:center;
                width:100%;
    justify-content:center;
            ">
    overflow:hidden;
                <div style="
">{{#switch:{{{method_name|}}}
                    width:58px;
|Микроволновка={{#ifexist:File:Microwave.gif|[[File:Microwave.gif|60px]]|[[File:Microwave.png|60px]]}}
                    height:58px;
|Смешивание={{#ifexist:File:Beaker.png|[[File:Beaker.png|60px]]|[[File:Beaker.gif|60px]]}}
                    display:flex;
|Нож={{#ifexist:File:Knife.png|[[File:Knife.png|60px]]|[[File:Knife.gif|60px]]}}
                    align-items:center;
|Скалка={{#ifexist:File:RollingPin.png|[[File:RollingPin.png|60px]]|[[File:RollingPin.gif|60px]]}}
                    justify-content:center;
|#default=[[File:Microwave.gif|60px]]
                    overflow:hidden;
}}
                ">[[File:{{{ingredient3_img}}}|46px]]</div>
</div>
                <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient3_name}}}{{#if:{{{ingredient3_amount|}}}|&nbsp;[{{{ingredient3_amount}}}]|}}</div>
            </div>
            |}}


            <!-- ИНГРЕДИЕНТ 4 -->
<div style="
            {{#if:{{{ingredient4_name|}}}|
    font-size:13px;
            <div style="
    font-weight:bold;
                display:flex;
    line-height:17px;
                flex-direction:column;
    text-align:center;
                align-items:center;
    color:#FFFFFF;
                width:100%;
    margin-top:4px;
            ">
">{{{method_name|Приготовление}}}{{#if:{{{method_time|}}}|<br>{{{method_time}}}|}}
                <div style="
</div>
                    width:58px;
                    height:58px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    overflow:hidden;
                ">[[File:{{{ingredient4_img}}}|46px]]</div>
                <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient4_name}}}{{#if:{{{ingredient4_amount|}}}|&nbsp;[{{{ingredient4_amount}}}]|}}</div>
            </div>
            |}}


            <!-- ИНГРЕДИЕНТ 5 -->
</div>
            {{#if:{{{ingredient5_name|}}}|
            <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:{{{ingredient5_img}}}|46px]]</div>
                <div style="
                    font-size:12px;
                    color:#FFFFFF;
                    text-align:center;
                    margin-top:5px;
                    line-height:16px;
                ">{{{ingredient5_name}}}{{#if:{{{ingredient5_amount|}}}|&nbsp;[{{{ingredient5_amount}}}]|}}</div>
            </div>
            |}}
        </div>


        <!-- ПРАВАЯ КОЛОНКА: МЕТОД + РЕЗУЛЬТАТ (вертикально) -->
<!-- РЕЗУЛЬТАТ -->
<div style="
    display:flex;
    align-items:flex-start;
    justify-content:center;
    border-left:1px solid #FFFFFF;
    padding-left:10px;
">
    <div style="
        display:flex;
        flex-direction:column;
        align-items:center;
        width:75px;
    ">
         <div style="
         <div style="
            width:58px;
            height:58px;
             display:flex;
             display:flex;
            flex-direction:column;
             align-items:center;
             align-items:center;
             justify-content:flex-start;
             justify-content:center;
            flex-shrink:0;
             overflow:hidden;
            min-width:80px;
        ">[[File:{{{result_img}}}|46px]]
            border-left:1px solid #FFFFFF;
        </div>
            padding-left:15px;
            gap:12px;
        ">
            <!-- СПОСОБ ПРИГОТОВЛЕНИЯ -->
            <div style="
                display:flex;
                flex-direction:column;
                align-items:center;
             ">
                <div style="
                    width:60px;
                    height:60px;
                    display:flex;
                    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="
            <div style="
             font-size:12px;
                display:flex;
            color:#FFFFFF;
                flex-direction:column;
            text-align:center;
                align-items:center;
            margin-top:5px;
             ">
            line-height:16px;
                <div style="
        ">{{{result_name|Результат}}}
                    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>
</div>


    </div>
</div>
</div>
</div>
</includeonly>
</includeonly>

Текущая версия от 02:46, 14 августа 2026