page: txp5

Core SASS

form: txp5_scss

_com-image.scss modified 31 days ago

GitHub: _com-image.scss

    
      #txp-image-group-content {
  z-index: 0;
  position: relative;

  *>div {
    margin-top: var(--base-unit);
  }

  input {
    width: 100%;
  }

  button {
    border: 0;

    &:hover {
      background: none;
    }

    &:hover {
      &#article-file-empty {
        color: var(--clr-error);
      }

      &#article-file-add {
        color: var(--clr-success);
      }
    }
  }

  .secondary-text {
    width: 100%;
    padding: var(--base-unit);
    text-align: center;

    &:hover {
      color: var(--clr-brand);
      cursor: pointer;
    }
  }
}

.com-image-container {
  //margin: var(--base-unit) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--base-unit--s);
  align-items: start;

  p {
    position: relative;
  }

  img {
    height: auto;
    width: 100%;
  }

  .destroy {
    position: absolute;
    right: var(--base-unit--ss);
    top: var(--base-unit--ss);
    color: var(--clr-bg);
   @media (prefers-color-scheme: dark) {
    color: var(--clr-text);

   }

    &:hover {
      color: var(--clr-warning);
    }
  }
}

#article-file-drop {}

Source html

 
        
          <section class="txp-details" id="txp-image-group" aria-labelledby="txp-image-group-label">
  <h3 class="txp-summary expanded" id="txp-image-group-label"><a role="button" data-txp-token="9b9776b627861c9b761a4e81a037f261" data-txp-pane="article_image" href="#txp-image-group-content" aria-controls="txp-image-group-content" aria-pressed="true">Article image</a></h3>
  <div class="toggle hidden ui-sortable" id="txp-image-group-content" role="group" aria-expanded="true" style="display: block;">
    <div class="txp-container">
      <div class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-image">Article image&nbsp;<a rel="help" title="Help" role="button" class="pophelp" href="?event=help&amp;step=pophelp&amp;item=article_image"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
        <div class="txp-form-field-value"><input name="Image" type="text" id="article-image" size="32" maxlength="255" value="1,2,3,4,5"></div>
      </div>
      <div id="article-file-container" class="com-image-container">
        <p class="sortable" data-id="1" title="landscape.svg|1"><a href="index.php?event=image&amp;step=image_edit&amp;id=1" title="landscape.svg (1)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/1t.svg" width="180" height="120" data-id="1" data-ext=".svg" data-width="961" data-height="641" alt="landscape" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="2" title="portrait.svg|2"><a href="index.php?event=image&amp;step=image_edit&amp;id=2" title="portrait.svg (2)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/2t.svg" width="180" height="270" data-id="2" data-ext=".svg" data-width="641" data-height="961" alt="portrait.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="3" title="square-ish-landscape.svg|3"><a href="index.php?event=image&amp;step=image_edit&amp;id=3" title="square-ish-landscape.svg (3)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/3t.svg" width="180" height="174" data-id="3" data-ext=".svg" data-width="641" data-height="621" alt="square-ish-landscape.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="4" title="square-ish-portrait.svg|4"><a href="index.php?event=image&amp;step=image_edit&amp;id=4" title="square-ish-portrait.svg (4)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/4t.svg" width="180" height="186" data-id="4" data-ext=".svg" data-width="621" data-height="641" alt="square-ish-portrait.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="5" title="square.svg|5"><a href="index.php?event=image&amp;step=image_edit&amp;id=5" title="square.svg (5)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/5t.svg" width="180" height="180" data-id="5" data-ext=".svg" data-width="641" data-height="641" alt="square.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
      </div>


      <div id="article-file-drop" class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-file-input">Upload</label></div>
        <div class="txp-form-field-value"><input id="article-file-input" type="file" name="article_file[]" multiple="multiple" accept="image/*"><input type="hidden" name="com_image_import" id="article-file-import" value="[]">
          <input type="hidden" name="com_image_tags" id="article-file-tags" value="">
          <label id="article-file-input-label" for="article-file-input" class="secondary-text">Click or drop files on this zone</label>
        </div>
      </div>

      <div class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-file-name">Search</label><span id="article-file-action" class="invisible"><button id="article-file-add" class="destroy"><span class="ui-icon ui-icon-plus">Add</span></button>Add<button id="article-file-empty" class="destroy"><span class="ui-icon ui-icon-close">Delete</span></button>Delete</span></div>
        <div class="txp-form-field-instructions">Shift+Enter: invert search mode</div>
        <div class="txp-form-field-value"><input id="article-file-name" placeholder="name, id" form="" type="text" size="32">
        </div>
      </div>
      <div id="article-file-select" class="com-image-container"></div>
    </div>
  </div>
</section>