Кнопка "Якорь" внутри соседнего предварительного - PullRequest
Новая
       77

Кнопка "Якорь" внутри соседнего предварительного

1 голос
/ 18 июня 2020

Я работаю над стилем для блога о кодировании, который создаю, и я пытаюсь заставить кнопки копирования работать правильно ...

Я хочу, чтобы обе кнопки копирования были выровнены по верхнему краю из pre s, независимо от того, предусмотрена ли метка. Предпочел бы, чтобы он был каким-то образом привязан к pre .

Лучше было бы переместить кнопки копирования в pre s (через встроенный ?). т. е. перекрытие правого верхнего угла pre . Меня не волнует, перекрывается ли он с текстом из pre .

Ограничение: я не могу перемещать какие-либо элементы HTML в или из «org-sr c -container» дел с. Я не могу переместить метку раньше (без написания дополнительного кода lisp, чего я бы хотел избежать). Я могу вносить любые изменения до или после блоков «org-sr c -container». Я ищу решение CSS (или JS) с учетом этого ограничения HTML.

Если это проще для стилизации, я могу переместить кнопку копирования перед «org-sr c -container ", а не после. Полное раскрытие информации, я использую режим организации для публикации файлов разметки sh .org в HTML.

Ниже показана моя проблема. 

.source-block {
  display: flex;
  align-items: center;
  align-content: flex-start;
}

pre {
  padding: 8pt;
  overflow: auto;
  margin: 1.2em;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

pre.src {
  position: relative;
  overflow: auto;
  padding-top: 1.2em;
  background: #0a0a0a;
  color: #fafafa;
}

.copyBtn {
  align-self: flex-start;
}

.org-src-container {
  width: 100%;
}
  
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
  

  

  
  #!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
copy

Вот исходный блок, предназначенный для передачи команд для интерактивного выполнения. Таким образом, имя файла отсутствует, и я опускаю метку. Кнопка копирования выровнена [приблизительно] с первой строкой исходного блока. Это почти то, что мне нужно, за исключением того, что это не перекрывает пред. 

echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
копия

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Вот единственное решение CSS, которое будет учитывать оба случая (с меткой или без нее) 

.source-block {
  display: grid;
  margin-top:0.5em;
}
.source-block .org-src-container,
.source-block button {
  grid-row:1;
  grid-column:1;
}
.source-block button {
  margin: 1.5em 1.5em auto auto;
  z-index: 1;
}
.source-block .org-src-container label {
  display:block;
  transform:translateY(-0.5em);
}
.source-block .org-src-container pre:not(:first-child) {
  margin-top:0;
}

pre {
  padding: 8pt;
  overflow: auto;
  margin: 1.2em;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

pre.src {
  position: relative;
  overflow: auto;
  padding-top: 1.2em;
  background: #0a0a0a;
  color: #fafafa;
}

.copyBtn {
  align-self: flex-start;
}

.org-src-container {
  width: 100%;
}

Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.
  

  

  
  #!/bin/bash
echo "line 1"
echo "line 2"
echo "line 3"
echo "line 4"
echo "line 5"
echo "line 6"
echo "line 7"
echo "line 8"
echo "line 9"
copy

Вот исходный блок, предназначенный для передачи команд для интерактивного выполнения. Таким образом, имя файла отсутствует, и я опускаю метку. Кнопка копирования выровнена [приблизительно] с первой строкой исходного блока. Это почти то, что мне нужно, за исключением того, что это не перекрывает пред. 

echo "command 1"
echo "command 2"
echo "command 3"
echo "command 4"
echo "command 5"
echo "command 6"
echo "command 7"
echo "command 8"
echo "command 9"
копия
0 голосов
/ 18 июня 2020

Вы можете настроить структуру CSS и HTML следующим образом. Основные изменения заключаются в установке внешнего контейнера (.org-src-container) на display: relative и кнопки копирования на display: absolute. Кроме того, я изменил структуру HTML, чтобы внутри контейнера оставались только блок <pre> и кнопка. 

.source-block {
    
}

pre {
    padding: 8px; /* do not use "pt" in CSS */
    overflow: auto;
    margin: 1.2em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

pre.src {
    position: relative;
    overflow: auto;
    padding-top: 1.2em;
    background: #0a0a0a;
    color: #fafafa;
}

.copyBtn {
    position: absolute;
    top: 1.2em;
    right: 1.7em;
}

.org-src-container {
    width: 100%;
    position: relative;
}
Here is source block meant to represent the contents of a file. Thus, I'm including a label with the filename. The copy button is [approximately] aligned with the label row. This is too high, looks like copying the filename.


    
    
        #!/bin/bash
        echo "line 1"
        echo "line 2"
        echo "line 3"
        echo "line 4"
        echo "line 5"
        echo "line 6"
        echo "line 7"
        echo "line 8"
        echo "line 9"
copy

Вот исходный блок, предназначенный для передачи команд для интерактивного выполнения. Таким образом, имя файла отсутствует, и я опускаю метку. Кнопка копирования выровнена [приблизительно] с первой строкой исходного блока. Это почти то, что мне нужно, за исключением того, что это не перекрывает предварительную. 

echo "command 1"
        echo "command 2"
        echo "command 3"
        echo "command 4"
        echo "command 5"
        echo "command 6"
        echo "command 7"
        echo "command 8"
        echo "command 9"
копия
...